微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
更新时间：2017年12月06日 09:59:57 作者：FutrueJet
这篇文章主要介绍了微信小程序实现点击按钮移动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标签的功能。
3、源代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章
本篇文章主要是对javascript模拟枚举的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
在现代Web开发中,动态加载CSS和JavaScript文件是一个常见的需求,这种技术可以用来优化页面加载速度,减少初始加载时间,并提高用户体验,本文将详细介绍如何通过JavaScript实现CSS和JS文件的动态加载,包括不同的加载方法、注意事项以及最佳实践2024-11-11
这篇文章主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下2014-08-08
filter()方法是JavaScript中用于过滤数组元素的常用方法,它接受一个回调函数作为参数,返回一个新数组,本文总结了使用filter()方法的最佳实践,感兴趣的朋友一起看看吧2025-01-01
昨天闲着没事，又因为工作需要，写了一个脚本，用来做ftp。当然不是直接做ftp，而是产生一个ftp的脚本，供ftp命令使用。2013-07-07
本篇文章主要介绍了详解JS获取HTML DOM元素的8种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家介绍了HTTP 302 redirect应用及作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
话说，人就是要被关注才有动力啊于是修改了下上次写的《添加JavaScript重载函数的辅助方法》在添加方法的时候增加了一个参数 用于限制参数的类型。2010-07-07
很神奇！js实现颜色渐变效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
avascript里有两个内置对象，一个是ArrayBuffer；一个是DataView，读写二进制数据都需要使用这两个对象。这篇文章主要给大家介绍了关于JavaScript读写二进制数据的方法，需要的朋友可以参考下2018-09-09
最新评论