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


Posted in Javascript onDecember 06, 2017

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

1、效果展示

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

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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 #Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 #Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 #Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 #Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 #Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 #Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 #Javascript
You might like
php购物车实现方法
2015/01/03 PHP
简单谈谈favicon
2015/06/10 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python函数中不定长参数的写法
2019/02/13 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
如何在python中实现线性回归
2020/08/10 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
完美主义个人的自我评价
2014/02/17 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
大学生求职计划书
2014/04/30 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
信用卡工资证明范本
2014/10/17 职场文书
2014年会计工作总结
2014/11/27 职场文书
教师辞职信范文
2015/02/28 职场文书
地球上的星星观后感
2015/06/02 职场文书
贫困证明书范文
2015/06/16 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2015年城管执法工作总结
2015/07/23 职场文书