Home > Article > WeChat Applet > The ScrollNav component of WeChat applet YDUI implements scrolling navigation effect
This article mainly introduces the ScrollNav component and scrolling navigation effect of YDUI in the WeChat applet in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
DEMO download
Rendering
##Implementation principle
Use dual scroll-view components to achieve dual scrolling!<!--导航滚动 --> <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}) } })Note
The sticky scrolling navigation bar effect implemented by jQuery
WeChat applet Top scrollable navigation effect
jQuery implements full-screen scrolling photo album with scrolling navigation effect_jquery
The above is the detailed content of The ScrollNav component of WeChat applet YDUI implements scrolling navigation effect. For more information, please follow other related articles on the PHP Chinese website!