微信小程式實現點擊按鈕移動view標籤的位置功能

這篇文章主要介紹了微信小程式實現點擊按鈕移動view標籤的位置功能,涉及微信小程式事件綁定與this.setData動態修改data數值進而改變view標籤樣式的相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式實作點擊按鈕移動view標籤的位置功能。分享給大家供大家參考，具體如下：

#1、效果展示

2、關鍵程式碼

index.wxml檔

#

<view class="view" style="left:{{viewLeft}}px;">我是view标签</view>
<button class="btn" type="default" bindtap="changeLocation">点击我移动view标签的位置</button>

index.wxss檔：

.view{
  position: absolute;
  background: green;
  color: white;
  width: 40%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.btn{
  position: absolute;
  top:100px;
  width: 80%;
  left: 10%;
}

index.js檔案

#

Page({
  data:{
    viewLeft:0
  },
  changeLocation(){
    var viewLeft=this.data.viewLeft;
    viewLeft+=5;
    this.setData({
      viewLeft:viewLeft
    })
  }
})

可見view元件通過.view的position : absolute;進行絕對位置定位。邏輯層響應點擊事件，使用this.setData動態改變style="left:{{viewLeft}}px;"中的viewLeft值，進而實現移動view標籤的功能。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

微信小程式開發之實作自訂Toast彈框

微信小程式使用checkbox顯示多重選擇框功能【附原始碼】

#

以上是微信小程式實現點擊按鈕移動view標籤的位置功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！