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

2024-09-27 17:37:23

前言

我们可以经常看到手机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>

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

movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
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里面需要讲解的内容比较多

x/y 用来控制菜单栏的位置，isStop停止移动
介绍一个js延迟执行事件的方法setTimeout（function () { }, 1000)，逗号左边执行事件的方法，右边设置延迟多久执行事件，1000对应的是一秒
GetRandomNum 这个方法是我自定义的，用于生成随机数字，计算滚动的距离
还有一个需要注意点是，要事件监听更新数据的时候，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样式设置的小窍门，读者回去认真记住使用规则，后面我们陆续会用上，好啦，今天的课程就到这~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te
微信小程序基于picker实现级联菜单

本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下 <view > <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}"> <view class="picker"> 品牌:{{brands[brandindex]}} </view> </
微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
微信小程序实现弹出菜单动画

微信小程序动画之弹出菜单,供大家参考,具体内容如下效果图 js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData(
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序实现炫酷的弹出式菜单特效

今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图.(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路: 1.首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能 2.点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到 3.分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画距离不同 4.收起的时候回到原来位置并且让透明度变成0就ok了思路说完了,下面开始上实现代码,这里同样也是封装成了组
微信小程序实现单列下拉菜单效果

接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构: 下面是实现的具体代码: .wxml  <view class="product-list">  <view class="choice-b
微信小程序-可移动菜单的实现过程详解

前言我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天代码君就教大家利用小程序的控件,实现一个可移动的菜单,效果图是这样的,要实现这样的效果,需要引出我们今天的重要人物movable-view movable-view属性介绍属性名作用参数值 direction 设置movable-view的移动方向属性值有all.vertical.horizontal.none inertia movable-view是否带有惯性 true/false 默认
监控微信小程序中的慢HTTP请求过程详解

Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报.时隔一年,微信小程序插件已经更新到 1.3.1, 而且提供了一个非常有用的功能,支持监控 HTTP 慢请求.对于轻量级的性能分析,可以说已经够用. 本文我们以一个天气微信小程序为例(由bodekjan开发),来演示如何监控慢请求.bmap-wx.js中的weather()函数调用百度地图小程序 api 提供的接口来获取天
微信小程序高德地图路线规划实现过程详解

前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标(GCJ-02) 微信小程序中使用的是腾讯地图作为底图.因此如果使用百度地图时,需要注意坐标的转换.此类坐标的转换函数在网上都有,这里不做过多解释准备工作: 1.在做小程序 ---- 路线规划之前,需要准备小程序APPID 以及相应使用地图的KEY值. 2.微信小程序API 之位置 API wx
微信小程序云函数使用mysql数据库过程详解

前言小程序云开发的功能是越来越强大了,现在小程序云开发可以直接借助云函数来链接mysql数据,操作mysql数据库了,今天就来给大家讲一讲如何使用小程序云开发的云函数来操作mysql数据库. 首先要明确一点,就是小程序云开发的云函数是基于node.js的,所以我们使用node.js的mysql2模块可以直接来链接并操作mysql数据库,所以我们现在要做的就是怎么样在云函数里使用mysql2模块,并且借助这个模块类库来实现mysql数据库的链接. 老规矩,先看效果图我们这里要做的就是在云函数里
微信小程序嵌入腾讯视频源过程详解

首先我们有一个接口可以获取动态的vkey https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid= 获取的数据格式是这样的 QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id&q
使用微信小程序开发弹出框应用实例详解

view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button typ
微信小程序本作用域下调用全局JS详解及实例

微信小程序本作用域下调用全局JS详解本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"
微信小程序利用css实现遮罩效果实例详解

微信小程序利用css实现遮罩效果实例详解实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解首先在官网下载示例代码, 选php的, 这里有个坑官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le
微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名类型默认值说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

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

相关推荐

随机推荐