微信小程序左侧边栏分类导航滑动特效制作设计模板教程下载

今天给大家带来微信小程序左侧边栏分类导航滑动特效制作设计模板教程，适合侧栏分类导航类型网站适用，制作完毕以后效果图如下：

一、wxml页面代码如下：

<!-- index.wxml -->
<view class="mpage {{!ui.tStart? 'withAnimate': ''}}" style="left:{{ui.offsetLeft}}px;width: {{ui.windowWidth}}px;" bindtouchstart="handlerStart" catchtouchmove="handlerMove"  bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" bindtap="handlerPageTap">
 这里首页内容
</view>

<!-- 侧滑栏 -->
<view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" class="user" style="width: {{ui.menuWidth}}px">
  <view style="width: {{ui.menuWidth}}px;left:{{-ui.menuWidth/3 + ui.offsetLeft/3}}px" class="user-box {{!ui.tStart? 'withAnimate': ''}}">
    <view class="user-face-wrapper">
      <image mode="aspectFill" src="/static/images/icon/backGround.png" style="height: 150px" class="loginbg"></image>
      <image class="user-face" src="{{userInfo.avatarUrl}}"></image>
      <view class='user-info'>
        <text>{{userInfo.nickName}}</text>
        <image wx:if="{{userInfo.gender == 1}}" src="/static/images/m3.png"></image>
        <image wx:if="{{userInfo.gender == 2}}" src="/static/images/w3.png"></image>
        <image wx:if="{{userInfo.gender == 0 || userInfo.gender==''}}" src="/static/images/sex.png"></image>
      </view>
    </view>
    <view style='background-color: #fff;' class='bottom-box'>
      <view class="list-box">
        <view class="icon-text">
          <span>步数</span>
        </view>
        <text>2543</text>
      </view>
      <view class="list-box " bindtap=" ">
        <view class="icon-text ">
          <span>排名</span>
        </view>
        <text>21</text>
      </view>
    </view>
    <view class="thirdblock" style='margin-top:80px;'>
      <view class="itemself" bindtap="click_myLaunch" data-index="1">
        <image src="/static/images/icon/times.png" class="itemself_ico"></image>
        <span>我的发起</span>
      </view>
      <view class="itemself" bindtap="click_myJoin" data-index="2">
        <image src="/static/images/icon/jssq.png" class="itemself_ico"></image>
        <span>我的加入</span>
      </view>
      <view class="itemself" bindtap="click_myCollection" data-index="3">
        <image src="/static/images/icon/status.png" class="itemself_ico"></image>
        <span>我的收藏</span>
      </view>
      <view class="itemself" bindtap="click_projectBrief" data-index="4">
        <image src="/static/images/icon/specialty.png" class="itemself_ico"></image>
        <span>项目简介</span>
      </view>
      <view class="itemself" bindtap="click_Tick" data-index="5">
        <image src="/static/images/icon/tick2.png " class="itemself_ico"></image>
        <span>反馈建议</span>
      </view>
       <view class="itemself" bindtap="click_more" data-index="6">
        <image src="/static/images/icon/plus.png " class="itemself_ico"></image>
        <span>更多信息</span>
      </view>
    </view>
    <view class="h10"></view>
    <view class="h10"></view>

  </view>
</view>

二、样式wxss页面代码如下;

/**index.wxss**/
@import '/font.wxss';

page, input, textarea {
  font-family: "Microsoft YaHei UI", "PingFang SC", -apple-system-font;
}

page {
  margin: 0;
  padding: 0;
  background: #fff;
  text-align: center;
  overflow-x: hidden;
}

.mpage {
  z-index: 10;
  position: fixed;
  bottom: 0;
  top: 0;
  background-color: #fff;
}


/*第二个侧滑页cSS*/

li {
  list-style: none;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #f0f0f0;
}

.h10 {
  background: #f0f0f0;
}

.h1 {
  height: 1px;
  margin-left: 50px;
  background: #f0f0f0;
  position: fixed;
}

.fr {
  float: right;
}

.hint {
  color: #666;
  font-size: 11px;
  margin-right: 5px;
}

.firstblock, .secondblock, .thirdblock {
  font-size: 16px;
}

/* 头部登陆 */

.loginbg {
  width: 100%;
  height: 416rpx;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  position: relative;
}

/* 设置条目 */

.itemself {
  padding-bottom: 7.5px;
  padding-top: 7.5px;
  background-color: #fff;
  border-bottom: 1rpx solid rgb(230, 230, 230);
  margin-left: 25%;
  margin-right: 12.5%;
}

.itemself_ico {
  float: left;
  width: 20px;
  height: 20px;
}

.itemself_arrow {
  float: right;
  height: 26px;
  width: 26px;
  margin: 11px 20px;
}

.presshover {
  background-color: #fafafa;
}

.font_size {
  font-size: 16px;
  color: #333;
}

.bottom-box {
  width: 100%;
  text-align: center;
}

.list-box {
  width: 25%;
  float: left;
  border-bottom: 10rpx solid rgb(230, 230, 230);
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.icon-text {
  height: 20px;
  line-height: 20px;
  font-size: 18px;
}

.user {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  border-right: 1px solid #dbdbdb;
  box-sizing: border-box;
}

.user .user-box {
  position: absolute;
  top: 0;
  bottom: 0;
}

.user .user-box .user-face-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 20rpx 0;
}

.user .user-box .user-face {
  width: 150rpx;
  height: 150rpx;
  position: fixed;
  border-radius: 50%;
  -moz-box-shadow: 0px 3px 20px #333;
  -webkit-box-shadow: 0px 3px 20px #333;
  box-shadow: 0px 3px 20px #333;
}

.user .user-box .user-info {
  height: 30px;
  position: fixed;
  margin-top: 60px;
}

.user .user-box .user-info text {
  width: 200rpx;
  height: 28px;
  float: left;
}

.user .user-box .user-info image {
  height: 20px;
  width: 20px;
  float: left;
}

.user .user-box .one-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  color: white;
  font-size: 38rpx;
}

/*---------------------------*/

.dialog {
  /*透明蒙层*/
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  z-index: 1000;
  color: #fff;
}

三、js页面代码如下：

//wx-drawer
var common = require('../../utils/common.js')
var Bmob = require("../../utils/bmob.js");
var util = require('../../utils/util.js');
var app = getApp()
var curIndex  = 0 ;
var that;
const MENU_WIDTH_SCALE = 0.82;
const FAST_SPEED_SECOND = 300;
const FAST_SPEED_DISTANCE = 5;
const FAST_SPEED_EFF_Y = 50;

var my_nick = wx.getStorageSync('my_nick')
var my_sex = wx.getStorageSync('my_sex')
var my_avatar = wx.getStorageSync('my_avatar')
Page({
  data: {
    my_nick: my_nick,
    my_sex: my_sex,
    my_avatar: my_avatar,
    userInfo: [],
    dialog:false,
    autoplay:false,
    ui: {
      windowWidth: 0,
      menuWidth: 0,
      offsetLeft: 0,
      tStart: true
      
    },
    buttonClicked: false, //是否点击跳转
    //--------首页显示内容---------
    postsList: [], //总的活动
    postsShowSwiperList: [], //轮播图显示的活动
    currentPage: 0, //要跳过查询的页数
    limitPage: 3,//首先显示3条数据（之后加载时都增加3条数据，直到再次加载不够3条）
    isEmpty: false, //当前查询出来的数据是否为空
    totalCount: 0, //总活动数量
    endPage: 0, //最后一页加载多少条
    totalPage: 0, //总页数
    curIndex: 0,
    windowHeight1: 0,
    windowWidth1: 0,
    
  },




  onLoad(t) {
    var self = this;
    //this.getAll();
    //this.fetchTopThreePosts(); //获取轮播图的3篇文章
    try {
      let res = wx.getSystemInfoSync()
      this.windowWidth = res.windowWidth;
      this.data.ui.menuWidth = this.windowWidth * MENU_WIDTH_SCALE;
      this.data.ui.offsetLeft = 0;
      this.data.ui.windowWidth = res.windowWidth;
      this.setData({ ui: this.data.ui })
    } catch (e) {
    }
  },

  onShow: function (e) {
    this.getAll();
    this.fetchTopThreePosts(); //获取轮播图的3篇文章
    //this.onLoad();
    console.log('加载头像')
    var that = this
   
    app.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      })
    })
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight1: res.windowHeight,
          windowWidth1: res.windowWidth,
          autoplay: true
        })
      }
    })
  },

  //数据存储
  onSetData: function (data) {
    console.log(data.length);
    let page = this.data.currentPage + 1;
    //设置数据
    data = data || [];
    this.setData({
      postsList: page === 1 || page === undefined ? data : this.data.postsList.concat(data),
    });
    console.log(this.data.postsList, page);
  },

  //获取总的活动数
  getAll: function () {
    self = this;
    var Diary = Bmob.Object.extend("Events");
    var query = new Bmob.Query(Diary);
    query.equalTo("isShow",1); //只统计公开显示的活动
    query.count({
      success: function (count) {
        var totalPage = 0;
        var endPage = 0;
        if (count % self.data.limitPage == 0) {//如果总数的为偶数
          totalPage = parseInt(count / self.data.limitPage);
        } else {
          var lowPage = parseInt(count / self.data.limitPage);
          endPage = count - (lowPage * self.data.limitPage);
          totalPage = lowPage + 1;
        }
        self.setData({
          totalCount: count,
          endPage: endPage,
          totalPage: totalPage
        })
        console.log("共有" + count + " 条记录");
        console.log("共有" + totalPage + "页");
        console.log("最后一页加载" + endPage + "条");
      },
    });
  },




  //获取轮播图的文章,点赞数最多的前3个
  fetchTopThreePosts: function () {
    var self = this;
    var molist = new Array();
    var Diary = Bmob.Object.extend("Events");
    var query = new Bmob.Query(Diary);
    query.equalTo("isShow", 1); //公开显示的
    query.descending("likenum");
    query.include("publisher");
    query.limit(3);
    query.find({
      success: function (results) {
        for (var i = 0; i < results.length; i++) {
          var publisherId = results[i].get("publisher").objectId;
          var title = results[i].get("title");
          var content = results[i].get("content");
          var acttype = results[i].get("acttype");
          var isShow = results[i].get("isShow");
          var endtime = results[i].get("endtime");
          var address = results[i].get("address");
          var addressdetail = results[i].get("addressdetail");
          var peoplenum = results[i].get("peoplenum");
          var likenum = results[i].get("likenum");
          var liker = results[i].get("liker");
          var isLike = 0;
          var commentnum = results[i].get("commentnum");
          
          var id = results[i].id;
          var createdAt = results[i].createdAt;
          var pubtime = util.getDateDiff(createdAt);
          var _url
          var actpic = results[i].get("actpic");
          if(actpic){
            _url = results[i].get("actpic")._url;
          }else {
            _url = "http://bmob-cdn-14867.b0.upaiyun.com/2017/12/01/89a6eba340008dce801381c4550787e4.png";
          }
          var publisherName = results[i].get("publisher").nickname;
          var publisherPic = results[i].get("publisher").userPic;
          var jsonA;
          jsonA = {
            "title": title || '',
            "content": content || '',
            "acttype": acttype || '',
            "isShow": isShow,
            "endtime": endtime || '',
            "address": address || '',
            "addressdetail": addressdetail || '',
            "peoplenum": peoplenum || '',
            "id": id || '',
            "publisherPic": publisherPic || '',
            "publisherName": publisherName || '',
            "publisherId": publisherId || '',
            "pubtime": pubtime || '',
            "actPic": _url || '',
            "likenum": likenum,
            "commentnum": commentnum,
            "is_liked": isLike || ''
          }
          molist.push(jsonA);
        }
        self.setData({
          postsShowSwiperList: molist
        })
       self.fetchPostsData(self.data); //加载首页信息
      },
      error: function (error) {
        console.log(error)
      }
    })
  },

  

 



 
 
  //进入我的发起
  click_myLaunch: function () {
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/mylaunch/mylaunch',
      });
    }
  },
  //进入我的加入
  click_myJoin: function () {
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/myjoin/myjoin',
      });
    }
  },
  //进入我的收藏
  click_myCollection: function () {
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/mycollection/mycollection',
      });
    }
  },
  //进入项目简介
  click_projectBrief: function () {
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/projectbrief/projectbrief',
      });
    }
  },

  //进入反馈建议
  click_Tick:function(){
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/issues/issues',
      });
    }
  },

  //进入更多信息
  click_more:function(){
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/more/more',
      });
    }
  },

  //进入关于我们
  click_aboutUs: function () {
    if (!this.buttonClicked) {
      util.buttonClicked(this);
      wx.navigateTo({
        url: '/pages/my/aboutus/aboutus',
      });
    }
  },





  //--------------------------------------------------------------------------------------------------------
  handlerStart(e) {
    let { clientX, clientY } = e.touches[0];
    this.tapStartX = clientX;
    this.tapStartY = clientY;
    this.tapStartTime = e.timeStamp;
    this.startX = clientX;
    this.data.ui.tStart = true;
    this.setData({ ui: this.data.ui })
   
  },
  handlerMove(e) {
    let { clientX } = e.touches[0];
    let { ui } = this.data;
    let offsetX = this.startX - clientX;
    this.startX = clientX;
    ui.offsetLeft -= offsetX;
    if (ui.offsetLeft <= 0) {
      ui.offsetLeft = 0;
    } else if (ui.offsetLeft >= ui.menuWidth) {
      ui.offsetLeft = ui.menuWidth;
    }
    this.setData({ ui: ui })
    
  },
  handlerCancel(e) {
    // console.log(e);
  },
  handlerEnd(e) {
    this.data.ui.tStart = false;
    this.setData({ ui: this.data.ui })
    let { ui } = this.data;
    let { clientX, clientY } = e.changedTouches[0];
    let endTime = e.timeStamp;
    //快速滑动
    if (endTime - this.tapStartTime <= FAST_SPEED_SECOND) {
      //向左
      if (this.tapStartX - clientX > FAST_SPEED_DISTANCE) {
        ui.offsetLeft = 0;
      } else if (this.tapStartX - clientX < -FAST_SPEED_DISTANCE && Math.abs(this.tapStartY - clientY) < FAST_SPEED_EFF_Y) {
        ui.offsetLeft = ui.menuWidth;
      } else {
        if (ui.offsetLeft >= ui.menuWidth / 2) {
          ui.offsetLeft = ui.menuWidth;
        } else {
          ui.offsetLeft = 0;
        }
      }
    } else {
      if (ui.offsetLeft >= ui.menuWidth / 2) {
        ui.offsetLeft = ui.menuWidth;
      } else {
        ui.offsetLeft = 0;
      }
    }
    this.setData({ ui: ui })
   
  },
  handlerPageTap(e) {
    let { ui } = this.data;
    if (ui.offsetLeft != 0) {
      ui.offsetLeft = 0;
      this.setData({ ui: ui })
     
    }
  },
  handlerAvatarTap(e) {
    let { ui } = this.data;
    if (ui.offsetLeft == 0) {
      ui.offsetLeft = ui.menuWidth;
      this.setData({ ui: ui })
    }
  },
})

模板简介：该模板名称为【微信小程序左侧边栏分类导航滑动特效制作设计模板教程下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。