这篇文章主要介绍了小程序如何实现点击按钮移动view标签的位置功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联是专业的吉阳网站建设公司，吉阳接单;提供成都网站制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行吉阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
微信小程序实现点击按钮移动view标签的位置功能。分享给大家供大家参考，具体如下：
1、效果展示
2、关键代码
index.wxml文件
我是view标签
点击我移动view标签的位置
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标签的功能。
感谢你能够认真阅读完这篇文章，希望小编分享的“小程序如何实现点击按钮移动view标签的位置功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
名称栏目：小程序如何实现点击按钮移动view标签的位置功能-创新互联
标题URL：
http://cdkjz.cn/article/cdpjdi.html
