介绍 & lt; !——导航滚动,——比;
& lt; scroll-view 类=皌ui-city-scroll", scroll-x=皌rue", scroll-into-view=癗AV{{地位}}“,scroll-with-animation=皌rue"比;
,& lt; text bindtap=癵etStatus", id=癗AV{{指数}}“,类=皌ui-nav-li {{index ===, status ?, & # 39; tui-nav-active& # 39;,:, & # 39; & # 39;}}“,材料指数=皗{指数}},,天气:为=皗{navList}}“在{{项}}& lt;/text>
& lt;/scroll-view>
& lt; !——列表滚动区,——比;
& lt; view 类=皌ui-fixed-y"祝辞
,& lt; scroll-view 类=皌ui-city-scroll-y", scroll-y=皌rue", scroll-into-view=癗AV{{地位}}“,scroll-with-animation=皌rue"比;
,& lt; view wx:=皗{navList}}“比;
& lt;才能view id=癗AV{{指数}}“,类=皌ui-list-head"在{{项}}& lt;/view>
& lt;才能view 类=皌ui-list-li"在{{项}},列表,{{指数}}& lt;/view>
,& lt;/view>
,& lt;/scroll-view>
& lt;/view> .tui-fixed-x {
,宽度:100%;
位置:大敌;固定;
,上图:0;
,左:0;
}
.tui-city-scroll {
,身高:80 rpx;
,行高:80 rpx;
,宽度:100%;
,空白:nowrap;}
}
.tui-nav-li {
,字体大小:30 rpx;
,填充:0,8 rpx;
}
.tui-nav-li:第一个孩子{padding-left: 16 rpx;}
.tui-nav-li:胎{padding-right: 16 rpx;}
.tui-nav-active{颜色:红色;}
.tui-fixed-y {
,宽度:100%;
,高度:钙(100%,安康;80 rpx);
位置:大敌;固定;
,底部:0;
,左:0;
}
.tui-city-scroll-y {
,填充:0,20 rpx;
,高度:100%;
,box-sizing: border-box;
}
.tui-list-head {
,高度:50 px;
,行高:50 px;
,text-align:中心;
,字体大小:30 rpx;
,颜色:蓝色;
}
.tui-list-li {
,身高:400 px;
,填充:10 rpx;
,颜色:# fff;
,字体大小:50 rpx;
,背景颜色:lightgreen;
} 页面({
,数据:{
,navList:[& # 39;今日特惠& # 39;,,& # 39;烟灶推荐& # 39;,,& # 39;净水饮水推荐& # 39;,,& # 39;洗碗机推荐& # 39;,,& # 39;电热推荐& # 39;,,& # 39;燃热推荐& # 39;,,& # 39;消毒柜推荐& # 39;,,& # 39;嵌入式推荐& # 39;,,& # 39;商用电器& # 39;,& # 39;活动说明& # 39;],
,状态:0
},
,getStatus (e) {
,this.setData({,状态:e.currentTarget.dataset.index})
,}
}) <李>
这篇文章主要介绍怎么用小程序YDUI的ScrollNav组件实现滚动导航效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强效果图
<强>实现原理
采用双滚动视图组件实现双滚动!
WXML
wxs
JS
注意
滚动视图组件如果横向滚动必须要有一个可视宽度,纵向滚动必须要有一个可视高度;
<李>滚动的定位采用滚动视图组件的scroll-into-view属性,用身份证进行定位。
以上是“怎么用小程序YDUI的ScrollNav组件实现滚动导航效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
