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

不言
發布: 2018-06-23 13:42:38
原創
5950 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板