微信小程序实现点击按钮移动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 相关文章推荐
javascript对JSON数据排序的3个例子
Apr 12 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
JavaScript中CreateTextFile函数
Aug 30 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中使用file_get_contents post数据代码例子
2015/02/13 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
浅谈Vue.js
2017/03/02 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python统计cpu利用率的方法
2015/06/02 Python
Python实现视频下载功能
2017/03/14 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
基于python实现文件加密功能
2020/01/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
2014年会策划方案
2014/05/11 职场文书
公司副总经理任命书
2014/06/05 职场文书
改革共识倡议书
2014/08/29 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
Golang入门之计时器
2022/05/04 Golang