微信小程序实现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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
node.js中watch机制详解
2014/11/17 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
CentOS安装pillow报错的解决方法
2016/01/27 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python实现搜索算法的实例代码
2020/01/02 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
python Tornado框架的使用示例
2020/10/19 Python
python实现KNN近邻算法
2020/12/30 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
股东合作协议书
2014/04/14 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
国庆节标语大全
2014/10/08 职场文书
工作会议通知
2015/04/15 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript