How does WeChat Mini Programs realize the scrolling tab effect of ScrollTab components
This article mainly explains "how to achieve the scrolling tab effect of ScrollTab components by WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs how to achieve the scrolling tab effect of ScrollTab components" bar!
WXML
{{item}} {{item}} {{item}} list {{index}}
WXSS
.tui-fixed-x {margin-left: 130px; position: fixed; top: 0; left: 0;} .tui-fixed-left {width: 120px; height: 100%; border-right: 1px solid # dfdfdf; position: fixed; background-color: # f5f5f5; top: 0; left: 0;} .tui-list-head {background-color: # fff; margin-bottom: 15px;} .tui-city-scroll {width: 100%;} .tui-nav-li {font-size: 30rpx; padding: 010px; height: 100rpx Line-height: 100rpx; width: 100px; display: block; border-bottom: 1px solid # dfdfdf; position: relative; z-index: 10;} .tui-nav-active {background-color: # fff;} .tui-fixed-y {margin-left: 120px; padding-left: 10px; padding-right: 10px; height: 100%; position: fixed; bottom: 0; right: 0;} .tui-city-scroll-y {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: ['Today special', 'smoke stove recommendation', 'clean drinking water recommendation', 'dishwasher recommendation', 'electric heating recommendation', 'heating recommendation', 'disinfection cabinet recommendation', 'embedded recommendation', 'commercial appliances', 'activity description'], status: 0} GetStatus (e) {this.setData ({status: e.currentTarget.dataset.index})}) so far I believe you have a deeper understanding of "how to achieve the scrolling tab effect of ScrollTab components by WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
