problem background
This article will introduce an idea of how to realize the side sliding bar in the development process of WeChat applets. The right display page does not move, and the left navigation slides. Click on the side sliding bar to appear, covering part of the display page.
problem analysis
First, the renderings are as follows:
problem solved
Not much to say, just go to the code.
(1) index.js file, the code is as follows:
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
text: 'ES6学习',
nav_list: ['ES6学习基础', 'CSS特效', 'VUE实战', '微信小程序'],
open: false
},
//列表的操作函数
open_list: function (opts) {
this.setData({ text: opts.currentTarget.dataset.title, open: false });
},
//左侧导航的开关函数
off_canvas: function () {
this.data.open ? this.setData({ open: false }) : this.setData({ open: true });
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1,
});
}
}
})
(2) index.wxml file, the code is as follows:
<view class="page">
<view class="page-top {
{open ? 'page-top-show' : ''}}">
<view class="nav-list" wx:for-items="{
{nav_list}}" bindtap="open_list" data-title="{
{item}}">
<text>{
{item}}</text>
</view>
</view>
<view class="page-bottom">
<image class="off-nav-list" bindtap="off_canvas" src="../../static/img/ic_arrow_right.png"></image>
<view class="page-bottom-content">
<text>{
{text}}</text>
</view>
<view class="page-mask {
{open ? '' : 'page-mask-hide'}}" bindtap="off_canvas"></view>
</view>
</view>
(3) index.wxss file, the code is as follows:
page,.page {
height: 100%;
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
}
/*左侧导航 */
.page-top{
position: fixed;
width: 75%;
height: 100%;
top: 0;
left: 0;
background-color: rgb(0, 68, 97);
transform: rotate(0deg) scale(1) translate(-100%,0%);
-webkit-transform: rotate(0deg) scale(1) translate(-100%,0%);
transition: all 0.4s ease;
z-index: 998;
}
.page-top-show{
transform: rotate(0deg) scale(1) translate(0%,0%);
-webkit-transform: rotate(0deg) scale(1) translate(0%,0%);
}
.nav-list{
padding: 30rpx 0 30rpx 40rpx;
color:#fff;
}
.page-bottom{
height: 100%;
background-color: rgb(57, 125, 230);
position: relative;
}
.off-nav-list{
position: fixed;
width: 60rpx;
height: 50rpx;
top: 20rpx;
left:20rpx;
}
.page-bottom-content{
padding:100rpx 20rpx 30rpx;
color: #fff;
}
.page-mask{
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-mask-hide{
display: none;
}
conclusion of issue
This article introduces an idea of how to realize the side sliding bar in the development process of WeChat applets. The right display page does not move, the left navigation slides, click on the side sliding bar to appear, and cover part of the display page. Interested students can further study .