微信小程序-可移动菜单的实现过程详解


Posted in Javascript onJune 24, 2019

前言

我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天代码君就教大家利用小程序的控件,实现一个可移动的菜单,效果图是这样的,要实现这样的效果,需要引出我们今天的重要人物movable-view

movable-view属性介绍

属性名 作用 参数值
direction 设置movable-view的移动方向 属性值有all、vertical、horizontal、none
inertia movable-view是否带有惯性 true/false 默认是false
out-of-bounds 超过可移动区域后,movable-view是否还可以移动 true/false 默认是false
x 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 number
y 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 number
damping 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 number 默认是20
friction 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 number默认是2

实现可移动菜单

一、wxml界面的实现

<view class='title-line'>
movable</view>
<movable-area class="moveArea">
<movable-view class='moveView' x="{{x}}" y="{{y}}" damping="40" direction="all" inertia='true'>菜单
</movable-view>
</movable-area>
<button class='button' type='primary' size='mini' bindtap='moveView'>点我随机滚动小方块</button>
<button class='button' type='primary' size='mini' bindtap='stopMove'>点我停止随机滚动</button>

界面布局比较简单,需要注意的几点

  1. movable-view 必须设置width和height属性,不设置默认为10px
  2. movable-view 默认为绝对定位,top和left属性为0px
  3. 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
  4. movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动

二、xxx.js随机移动实现的逻辑

Page({
data: {
x: 0,
y: 0,
isStop:false,
},
moveView:function(e)
{
var that = this;
setTimeout(function () {
that.move(that);
}, 1000);
},
stopMove: function (e) {
this.setData({
isStop: true
})
},
move: function (that)
{
var randowX = that.GetRandomNum(1, 200);
var randowY = that.GetRandomNum(1, 400);
that.setData({
x: randowX,
y:randowY,
})
if(!that.data.isStop)
{
setTimeout(function () {
that.move(that);
}, 100);
}
},
//随机函数
GetRandomNum: function (Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
},

js里面需要讲解的内容比较多

  1. x/y 用来控制菜单栏的位置,isStop停止移动
  2. 介绍一个js延迟执行事件的方法setTimeout(function () { }, 1000),逗号左边执行事件的方法,右边设置延迟多久执行事件,1000对应的是一秒
  3. GetRandomNum 这个方法是我自定义的,用于生成随机数字,计算滚动的距离
  4. 还有一个需要注意点是,要事件监听更新数据的时候,this对象在程序中随时会改变,此时需要执行 var that = this;把this对象传递给that就可以解决上面遇见的问题

三、wxss样式

.moveArea {
height: 400px;
width:200px;
background: red;
margin: 10px;
}
.moveView {
height: 100rpx;
width: 100rpx;
line-height: 100rpx;
background: blue;
border-radius: 50%;
text-align: center;
margin: 10rpx;
}

今天讲解的样式有一下几个

如何把图形从方形变成圆形?

border-radius 这是今天的主角,把他的值设置成50%,就由方形变成圆形了,这个属性是设置圆角的,设置10%,是有一点圆角的方形

设置内容垂直居中方法

这是代码君的一个小窍门,把height和line-height设置成一样,他自动会垂直居中

总结

今天讲解的是可移动的菜单,本身实现是没什么难度的,我又引入了几个知识点,一个是推迟事件函数的使用还有就是几个css样式设置的小窍门,读者回去认真记住使用规则,后面我们陆续会用上,好啦,今天的课程就到这~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
原生js实现分页效果
Sep 23 Javascript
webpack自动打包和热更新的实现方法
Jun 24 #Javascript
Promise扫盲贴
Jun 24 #Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 #Javascript
前端天气插件tpwidget使用方法详解
Jun 24 #Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
JS实现给数组对象排序的方法分析
Jun 24 #Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 #Javascript
You might like
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
《老山界》教学反思
2014/04/08 职场文书
汽车专业求职信
2014/06/05 职场文书
酒店开业主持词
2015/07/02 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
python 进阶学习之python装饰器小结
2021/09/04 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技