微信小程序实现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 相关文章推荐
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
JS Canvas接口和动画效果大全
Apr 29 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
无限级别菜单的实现
2006/10/09 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python使用psutil模块获取系统状态
2016/08/27 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python中and和or如何使用
2020/05/28 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
行政管理毕业生自荐信
2014/02/24 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python