您的位置：首页 > 移动开发 > 微信开发

微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

2017-12-06 09:59 1351 查看

本文实例讲述了微信小程序实现点击按钮移动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标签的功能。

3、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序按钮 view标签

相关文章推荐

新的分享

章节导航