微信小程序 界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)...

本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考,具体如下:

实现的目标—-YDUI的Popup组件

点击列表图标—-左侧的菜单栏显示—-点击关闭按钮或者右侧的遮罩层—-左侧菜单栏关闭

实现方案1:左侧菜单和右侧展示页面分为上下两层

wxml

{{item}}

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"

indicator-color="#fff" indicator-active-color="red">

wxss

page,.page {

height: 100%;

font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;

}

/*左侧导航列表 */

.page-bottom{

height: 100%;

width: 75%;

position: fixed;

background-color: rgb(0, 68, 97);

z-index: 0;

}

.page-list{

color: white;

padding: 30rpx 0 30rpx 40rpx;

}

/*右侧展示层 */

.page-top{

position: relative;

top: 0;

left:0;

width: 750rpx;

height: 100%;

background-color: rgb(57, 125, 230);

z-index: 0;

transition: All 0.4s ease;

-webkit-transition: All 0.4s ease;

}

.page-state{

transform: rotate(0deg) scale(1) translate(75%,0%);

-webkit-transform: rotate(0deg) scale(1) translate(75%,0%);

}

.imgw{width:100%;}

/*右侧列表按钮 */

.page-top .left-nav{

position: fixed;

width: 68rpx;

height: 38rpx;

left: 20rpx;

bottom: 20rpx;

}

/*右侧遮罩层 */

.page-mask{

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background-color: rgba(0,0,0,0.5);

z-index: 998;

}

.page-mask-show{

display: none;

}

js

var app = getApp();

var data = require('../../utils/data.js');

Page({

/**

* 页面的初始数据

*/

data: {

banner_url: data.bannerList(),

nav_list: ['ES6学习之路', 'CSS特效', 'VUE实战','微信小程序'],

open: false,

indicatorDots: true,//是否显示面板指示点

autoplay: true,//是否开启自动切换

interval: 3000,//自动切换时间间隔

duration: 500//滑动动画时长

},

//列表的操作函数

open_list: function(){

//此处进行操作

this.setData({

open: false

});

},

//左侧导航的开关函数

offCanvas: function(){

if(this.data.open){

this.setData({

open: false

});

}else{

this.setData({

open: true

});

}

}

})

总结:

1. 右侧展示的动画,我们可以直接通过class将其统一定义完整,然后通过切换class来改变动画的控制—-减少了js对dom中style的操作。

2. 在左侧菜单导航操作的最后记得open=false,使页面还原。

DEMO源码

点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python函数:函数参数,常用函数工具

文章目录python函数之参数python的lambda表达式:函数工具:map,filter,reduce>>> def f(a):a99>>> b88 >>> f(b) >>> print(b) 88 >>> def ch(a,b):a2b[0]eoe>>> x1 >&g…

gradient设置上下渐变_图解CSS: CSS渐变

CSS的渐变主要分布在 conic-gradient()和repeating-conic-gradient()两个属性。在CSS中,CSS的渐变相当于图像,我们可以使用线性渐变(linear-gradient()和repeating-linear-gradient())、径向渐变(radial-gradient()和repeating-radial-gradient())和锥形…

2021泗阳致远中学高考成绩查询,2021高考成绩什么时候发布?可通过哪些途径查询?...

3、安徽省高考成绩预计将于6月23日公布各批次录取分数线和高考成绩,考生可通过安徽省教育招生考试院自行查分;4、湖南高考成绩将于6月25日左右公布,本科不再分一二三批,考生可通过湖南教育政务网、湖南省普通高校招生考试考生综合…

python函数之作用域

python函数之作用域: >>> def times(x,y):return x*y>>> times(2,4) 8 >>> times(3.1,4) 12.4 >>> times(eop,4) eopeopeopeop >>> def inset(s1,s2):res[]for x in s1:if x in s2:res.append(x)return res>>&…

mysql数据库的字符集_mysql数据库中字符集乱码问题原因及解决

前言有的时候我们在查看数据库数据时,会看到乱码。实际上,无论何种数据库只要出现乱码问题,这大多是由于数据库字符集设定的问题。下面我们就介绍一下,数据库的字符集的设定及乱码问题的解决。mysql数据库的字符集直白的说&#x…

加强计算机网络应用,如何加强计算机网络管理技术创新应用

车煜铭摘要:在社会的发展当中,计算机网络被普遍运用,因此,令人们对计算机网络的依赖性越来越大。长久以来,大部分计算机用户渴望获得一个稳定的网络氛围。为了符合这一需求,计算机网络管理系统随之诞生。其…

python基本语句

文章目录1.赋值语句序列赋值语句:多目标赋值语句:增强赋值语句:表达式语句2.条件语句和循环语句if语句:while循环:for循环:range计数器zip函数enumerate函数1.赋值语句 >>> a1 >>> b2 &…

mysql 经典面试_这些MySQL经典面试题你要知道!

1、MySQL的复制原理以及流程(1)、复制基本原理流程1. 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中;2. 从:io线程——在使用start slave 之后,负责从master上拉取 binlog 内容&#xff…

html乱码框框,springmvc+font-awesome开发出的页面显示方框乱码的解决方法

在web.xml中配置如下:springorg.springframework.web.servlet.DispatcherServletcontextConfigLocationclasspath:conf/spring-mvc.xml2spring/default*.cssdefault*.gifdefault*.jpgdefault*.pngdefault*.jpegdefault*.jsdefault*.svgdefault*.eotdefault*.woffdef…

1主5从mysql数据库_MySQL主从复制虽好,能完美解决数据库单点问题吗?

一、单个数据库服务器的缺点数据库服务器存在单点问题;数据库服务器资源无法满足增长的读写请求;高峰时数据库连接数经常超过上限。二、如何解决单点问题增加额外的数据库服务器,组建数据库集群;同一集群中的数据库服务器需要具有…

python基本对象类型

文章目录python对象类型1.数字2.字符串3.列表4.字典5.元组6.文件7.其他核心类型python对象类型 1.数字 例子 >>> 123222 345 >>> 1.5*399 598.5 >>> 2**10 1024 >>> 3.1415*2 6.283 >>> 9.99991 10.9999 >>> import …

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏?

在任何地方找不到解决方案(我猜这一定是一个非常常见的问题).我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有200px的固定宽度并且具有未知高度.我怎样才能使主要内容区占据所有剩余的宽度,而不会有任何不当行为.最接近我的是以下内容,但问题在于侧边栏可以与页脚重叠.…

js语句连接mysql数据库_js中require()的用法----JS如何连接数据库执行sql语句或者建立数据库连接池...

var vue require(vue);引入vue的意思,commonjs的写法。node都是用require来载入模块的,可以看看webpackvue。require()可以调用模块。这不是就把vue模块命了个名吗?nodejs的写法,引入vue模块并命名为vue的意思。前端的东西&#…

(DFS)迷宫问题

题目: 从s到t,.意味着可以走,*意味着不能走,如果能走,输出路径,如果不能走,输出no。 输入: 5 6 ....S* .***.. .*..*. *.***. .T....输出: ....m* …

惠普z6计算机进不去桌面,HP Z6 桌面工作站 | HP® HK 惠普香港

Intel、Thunderbolt 及 Xeon 均為 Intel Corporation 於美國及/或其他國家或地區的商標。Microsoft 及 Windows 為 Microsoft Corporation 於美國及/或其他國家或地區的註冊商標或商標。NVIDIA 是 NVIDIA Corporation 在美國及其他國家或地區的商標及/或註冊商標。USB Type-C™…

mysql定义条件和处理_mysql sql存储过程条件定义与处理

一、条件定义DECLARE condition_name CONDITION FOR condition_valecondition_value:sqlstate[value] sqldata_value |mysql教程_error_code二、条件处理DECLARE htype HANDLER FOR cond_value[...] sp_statementhandtype_value:sqlstate [value] saltate_value|contentname|sq…

(DFS)跳马

题目: 马走日,不考虑别马脚,问马能否从S走到T,其中‘#’表示不能落下,‘.’表示能落下 输入: .#....#S# ..#.#.#.. ..##.#..# ......##. ...T..... ...#.#... ...#..... ...###... ......... .##......输…

长沙医学院学位计算机考试内容,湖南长沙医学院2017年9月计算机等级考试报名时间...

长沙医学院2017年下半年第49次全国计算机等级考试(以下简称NCRE)将于2017年9月23至25日举行。为做好本次考试报名及相关考务工作,现将有关事项通知如下:一、报名时间:2016年6月7日—2016年6月18日,逾期不接受任何理由的补报名。二…

(递推)常用递推式总结及实现

常用递推式 后面问题的解可以由前面问题的解递推而来,每一项都与前面若干项有一定关联。它是一种用若干步可以重复的简单运算来描述复杂问题的方法。 爬楼梯和兔子问题和斐波那契:f(n)f(n−1)f(n−2);f(1)1,f(2)1f(n)f(n-1)f(n-2) ; f(1)1,f(2)1 f(n)f…

mysql建表语句utf-8_mysql 创建utf-8数据集

之前数据库都是默认的‘latin1 ’,由于业务需求,需要把数据集修改为utf-8(1)创建一个新的数据库,并设置默认的格式为utf-8CREATE DATABASE IF NOT EXISTS yourdbname DEFAULT CHARSET utf8 COLLATE utf8_general_ci;(2) 将这个yourdbname 数据…