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


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入门教程(3) js面向对象
Jan 31 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
详解vue引入子组件方法
Feb 12 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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中extract()函数的定义和用法
2012/08/17 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
js传值 判断
2006/10/26 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解webpack 多入口配置
2017/06/16 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
vue之延时刷新实例
2019/11/14 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Django如何将URL映射到视图
2019/07/29 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
医生个人年终总结
2015/02/28 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
PHP 时间处理类Carbon
2022/05/20 PHP
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers