微信小程序?qū)崿F(xiàn)點擊按鈕移動view標(biāo)簽的位置功能示例【附demo源碼下載】
更新時間：2017年12月06日 09:59:57 作者：FutrueJet
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕移動view標(biāo)簽的位置功能,涉及微信小程序事件綁定與this.setData動態(tài)修改data數(shù)值進(jìn)而改變view標(biāo)簽樣式的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)點擊按鈕移動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">點擊我移動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)行絕對位置定位。邏輯層響應(yīng)點擊事件，使用this.setData動態(tài)改變style="left:{{viewLeft}}px;"中的viewLeft值，進(jìn)而實現(xiàn)移動view標(biāo)簽的功能。
3、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
本篇文章主要是對javascript模擬枚舉的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載
在現(xiàn)代Web開發(fā)中,動態(tài)加載CSS和JavaScript文件是一個常見的需求,這種技術(shù)可以用來優(yōu)化頁面加載速度,減少初始加載時間,并提高用戶體驗,本文將詳細(xì)介紹如何通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載,包括不同的加載方法、注意事項以及最佳實踐2024-11-11
js實現(xiàn)點擊后將文字或圖片復(fù)制到剪貼板的方法
這篇文章主要介紹了js實現(xiàn)點擊后將文字或圖片復(fù)制到剪貼板的方法,功能非常實用,需要的朋友可以參考下2014-08-08
JS中如何使用 filter() 方法過濾數(shù)組元素
filter()方法是JavaScript中用于過濾數(shù)組元素的常用方法,它接受一個回調(diào)函數(shù)作為參數(shù),返回一個新數(shù)組,本文總結(jié)了使用filter()方法的最佳實踐,感興趣的朋友一起看看吧2025-01-01
昨天閑著沒事，又因為工作需要，寫了一個腳本，用來做ftp。當(dāng)然不是直接做ftp，而是產(chǎn)生一個ftp的腳本，供ftp命令使用。2013-07-07
本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
話說，人就是要被關(guān)注才有動力啊于是修改了下上次寫的《添加JavaScript重載函數(shù)的輔助方法》在添加方法的時候增加了一個參數(shù) 用于限制參數(shù)的類型。2010-07-07
很神奇！js實現(xiàn)顏色漸變效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript讀寫二進(jìn)制數(shù)據(jù)的方法詳解
avascript里有兩個內(nèi)置對象，一個是ArrayBuffer；一個是DataView，讀寫二進(jìn)制數(shù)據(jù)都需要使用這兩個對象。這篇文章主要給大家介紹了關(guān)于JavaScript讀寫二進(jìn)制數(shù)據(jù)的方法，需要的朋友可以參考下2018-09-09