這篇文章主要介紹了微信小程式實現點擊按鈕移動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中文網！
相關推薦：
微信小程式使用checkbox顯示多重選擇框功能【附原始碼】
#
以上是微信小程式實現點擊按鈕移動view標籤的位置功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
