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

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能分享给大家供大家参考,具体如下:

1、效果展示

2、关键代码

index.wxml文件

rush:xml;"> 标签

index.wxss文件

rush:css;"> .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文件

rush: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;"中的标签的功能

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

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

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序