這篇文章主要介紹了微信小程式實現點擊按鈕移動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中文網其他相關文章!