微信小程序如何实现点击按钮移动view标签的位置功能-创新互联

这篇文章主要介绍了微信小程序如何实现点击按钮移动view标签的位置功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站制作、成都做网站、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!

具体如下:

1、效果展示

微信小程序如何实现点击按钮移动view标签的位置功能

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动态改变中的viewLeft值,进而实现移动view标签的功能。

感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何实现点击按钮移动view标签的位置功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享标题:微信小程序如何实现点击按钮移动view标签的位置功能-创新互联
标题URL:http://bzwzjz.com/article/igphs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都企业网站制作 响应式网站设计 梓潼网站设计 高端网站建设 重庆企业网站建设 成都网站设计 定制网站建设多少钱 外贸营销网站建设 成都网站设计 重庆企业网站建设 网站建设费用 四川成都网站设计 成都网站设计制作公司 网站设计 专业网站设计 专业网站建设 成都网站制作 专业网站设计 成都网站设计 成都网站建设 网站建设 成都网站设计