微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕移動(dòng)view標(biāo)簽的位置功能示例【附demo源碼下載】

更新時(shí)間：2017年12月06日 09:59:57 作者：FutrueJet

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕移動(dòng)view標(biāo)簽的位置功能,涉及微信小程序事件綁定與this.setData動(dòng)態(tài)修改data數(shù)值進(jìn)而改變view標(biāo)簽樣式的相關(guān)操作技巧,需要的朋友可以參考下

本文實(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
    })
  }
})

可見view組件通過.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ì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript模擬枚舉的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript模擬枚舉的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
通過JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載
在現(xiàn)代Web開發(fā)中,動(dòng)態(tài)加載CSS和JavaScript文件是一個(gè)常見的需求,這種技術(shù)可以用來優(yōu)化頁面加載速度,減少初始加載時(shí)間,并提高用戶體驗(yàn),本文將詳細(xì)介紹如何通過JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載,包括不同的加載方法、注意事項(xiàng)以及最佳實(shí)踐
2024-11-11
js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法,功能非常實(shí)用,需要的朋友可以參考下
2014-08-08
JS中如何使用 filter() 方法過濾數(shù)組元素
filter()方法是JavaScript中用于過濾數(shù)組元素的常用方法,它接受一個(gè)回調(diào)函數(shù)作為參數(shù),返回一個(gè)新數(shù)組,本文總結(jié)了使用filter()方法的最佳實(shí)踐,感興趣的朋友一起看看吧
2025-01-01
用Javascript來生成ftp腳本的小例子
昨天閑著沒事，又因?yàn)楣ぷ餍枰?，寫了一個(gè)腳本，用來做ftp。當(dāng)然不是直接做ftp，而是產(chǎn)生一個(gè)ftp的腳本，供ftp命令使用。
2013-07-07
詳解JS獲取HTML DOM元素的8種方法
本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
HTTP?302?redirect應(yīng)用及介紹
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
添加JavaScript重載函數(shù)的輔助方法2
話說，人就是要被關(guān)注才有動(dòng)力啊于是修改了下上次寫的《添加JavaScript重載函數(shù)的輔助方法》在添加方法的時(shí)候增加了一個(gè)參數(shù) 用于限制參數(shù)的類型。
2010-07-07
漂亮! js實(shí)現(xiàn)顏色漸變效果
很神奇！js實(shí)現(xiàn)顏色漸變效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript讀寫二進(jìn)制數(shù)據(jù)的方法詳解
avascript里有兩個(gè)內(nèi)置對(duì)象，一個(gè)是ArrayBuffer；一個(gè)是DataView，讀寫二進(jìn)制數(shù)據(jù)都需要使用這兩個(gè)對(duì)象。這篇文章主要給大家介紹了關(guān)于JavaScript讀寫二進(jìn)制數(shù)據(jù)的方法，需要的朋友可以參考下
2018-09-09