微信小程序实现左侧滑动导航栏


Posted in Javascript onApril 08, 2020

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下

左侧滑动导航栏如图

微信小程序实现左侧滑动导航栏

wxml

<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view style='float: left' class='left'>
 <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
 <view class='all clear'>
 <block wx:key="lists" wx:for="{{lists}}">
 <view bindtap='jumpIndex' data-menuindex='{{index}}'>
 <view class='text-style'>
 <text class="{{indexId==index?'active1':''}}">{{item}}</text>
 <text class="{{indexId==index?'active':''}}"></text>
 </view>
 </view>
 </block>
 </view>
 </scroll-view>
</view>

wxss

.under_line{
 width: 100%;
 border-top: 1rpx solid #efefef;
}
.scrollY {
 width: 200rpx;
 position: fixed;
 left: 0;
 top: 0;
 border-right: 1rpx solid #efefef;
}
 
.left {
 border-top: 1rpx solid #efefef;
 border-right: 1rpx solid #efefef;
}
 
.text-style {
 width: 200rpx;
 height: 140rpx;
 line-height: 140rpx;
 text-align: center;
 font-size: 34rpx;
 font-family: PingFangSC-Semibold;
 color: rgba(51, 51, 51, 1);
}
 
.active1 {
 color: #85d1fd;
}
 
.active {
 display: block;
 width: 50rpx;
 height: 6rpx;
 background: #85d1fd;
 position: relative;
 left: 75rpx;
 bottom: 30rpx;
}

js

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 lists: [
 "标题1", "标题二", "标题三", "标题四", "标题五", "标题六", "标题七", "标题八", "标题九", "标题十", "标题十一", "标题十二"
 ],
 indexId: 0,
 },
 // 左侧点击事件
 jumpIndex(e) {
 let index = e.currentTarget.dataset.menuindex
 let that = this
 that.setData({
 indexId: index
 });
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var that = this
 wx.getSystemInfo({
 success: function(res) {
 that.setData({
 winHeight: res.windowHeight
 });
 }
 });
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function() {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function() {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function() {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function() {
 
 }
})

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 #Javascript
微信小程序实现侧边分类栏
Oct 21 #Javascript
微信小程序实现侧边栏分类
Oct 21 #Javascript
微信小程序中weui用法解析
Oct 21 #Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 #Javascript
小程序实现日历左右滑动效果
Oct 21 #Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP文件操作详解
2016/12/30 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js资料toString 方法
2007/03/13 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python实现换位加密算法的示例
2018/10/14 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python next()和iter()函数原理解析
2020/02/07 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
责任书范本
2014/08/25 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
感恩教师主题班会
2015/08/12 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server