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


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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jquery实现图片预加载
Dec 25 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python实现狄克斯特拉算法
2019/01/17 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Django model select的多种用法详解
2019/07/16 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python是怎么被发明的
2020/06/15 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
网络方面基础面试题
2012/11/16 面试题
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
公司业务员管理制度
2015/08/05 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
小学英语课教学反思
2016/02/15 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis