微信小程序实现YDUI的ScrollNav组件


Posted in Javascript onFebruary 02, 2018

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

DEMO下载

效果图

微信小程序实现YDUI的ScrollNav组件

实现原理

采用双 scroll-view 组件实现双滚动!

WXML

<!--导航滚动 -->
<scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
 <text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}">{{item}}</text>
</scroll-view>
<!--列表滚动区 -->
<view class="tui-fixed-y">
 <scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
 <view wx:for="{{navList}}">
  <view id="NAV{{index}}" class="tui-list-head">{{item}}</view>
  <view class="tui-list-li">{{item}} 列表 {{index}}</view>
 </view>
 </scroll-view>
</view>

WXSS

.tui-fixed-x{
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;
}
.tui-city-scroll{
 height: 80rpx;
 line-height: 80rpx;
 width: 100%;
 white-space: nowrap;
}
.tui-nav-li{
 font-size: 30rpx;
 padding: 0 8rpx;
}
.tui-nav-li:first-child{padding-left: 16rpx;}
.tui-nav-li:last-child{padding-right: 16rpx;}
.tui-nav-active{color: red;}

.tui-fixed-y{
 width: 100%;
 height: calc(100% - 80rpx);
 position: fixed;
 bottom: 0;
 left: 0;
}
.tui-city-scroll-y{
 padding: 0 20rpx;
 height: 100%;
 box-sizing: border-box;
}
.tui-list-head{
 height: 50px;
 line-height: 50px;
 text-align: center;
 font-size: 30rpx;
 color: blue;
}
.tui-list-li{
 height: 400px;
 padding: 10rpx;
 color: #fff;
 font-size: 50rpx;
 background-color: lightgreen;
}

JS

Page({
 data: {
 navList: ['今日特惠', '烟灶推荐', '净水饮水推荐', '洗碗机推荐', '电热推荐', '燃热推荐', '消毒柜推荐', '嵌入式推荐', '商用电器','活动说明'],
 status: 0
 },
 getStatus(e){
 this.setData({ status: e.currentTarget.dataset.index})
 }
})

注意

  • scroll-view 组件如果横向滚动必须要有一个可视宽度,纵向滚动必须要有一个可视高度;
  • 滚动的定位采用 scroll-view 组件的 scroll-into-view 属性,用 id 进行定位。

DEMO下载

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

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
详解javascript new的运行机制
Jan 26 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
js实现搜索栏效果
Nov 16 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 #Javascript
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
You might like
PHP比较运算符的详细介绍
2015/09/29 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
js 处理URL实用技巧
2010/11/23 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
微信小程序页面传值实例分析
2017/04/19 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python绘制七段数码管实例代码
2017/12/20 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python生成器generator用法示例
2018/08/10 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
新锐科技Java程序员面试题
2016/07/25 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
秋天的图画教学反思
2014/05/01 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
校园广播稿100字
2014/10/06 职场文书
黄埔军校观后感
2015/06/10 职场文书
汽车销售合同文本
2019/08/08 职场文书