本文實(shí)例講述了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕移動(dòng)view標(biāo)簽的位置功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
index.wxml文件
<view class="view" style="left:{{viewLeft}}px;">我是view標(biāo)簽</view><button class="btn" type="default" bindtap="changeLocation">點(diǎn)擊我移動(dòng)view標(biāo)簽的位置</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 }) }})可見(jiàn)view組件通過(guò).view的position: absolute;進(jìn)行絕對(duì)位置定位。邏輯層響應(yīng)點(diǎn)擊事件，使用this.setData動(dòng)態(tài)改變style="left:{{viewLeft}}px;"中的viewLeft值，進(jìn)而實(shí)現(xiàn)移動(dòng)view標(biāo)簽的功能。
3、源代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
