溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序如何實現(xiàn)點擊按鈕移動view標簽的位置功能

發(fā)布時間：2021-06-29 15:38:01 來源：億速云 閱讀：791 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了微信小程序如何實現(xiàn)點擊按鈕移動view標簽的位置功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體如下：

1、效果展示

微信小程序如何實現(xiàn)點擊按鈕移動view標簽的位置功能

2、關(guān)鍵代碼

index.wxml文件

<view class="view" >我是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;進行絕對位置定位。邏輯層響應(yīng)點擊事件，使用this.setData動態(tài)改變中的viewLeft值，進而實現(xiàn)移動view標簽的功能。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序如何實現(xiàn)點擊按鈕移動view標簽的位置功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手