How does WeChat Mini Programs realize the tab effect of sliding on the top navigation bar
This article introduces the relevant knowledge of "how to achieve the top navigation bar sliding tab effect by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Effect picture:
The first is the effect of sliding:
Use Mini Program, just move horizontally.
WXML: here I define the navigation bar display categories as 5, each 20%. When there are more than 5 categories, that is, index > 4, the ellipsis below the navigation bar is added (because the border-bottom of tab-nac can only display the fifth category)
{{item.text}}
WXSS:
.tab {display: flex; flex-direction: column;}. Tab-nav {height: 80rpx; background: # fff; border-bottom: 0.5rpx dotted # ddd; display: flex; line-height: 79rpx; position: relative;}. Tab-line {position: absolute; left: 0; bottom:-1rpx; height: 4rpx; background: # f7982a; transition: all 0.3s;} .tab-content {flex: 1; overflow-y: auto; overflow-x: hidden;}
JS:
Import util from'. /.. /.. / utils/util.js' Page ({data: {showtab: 0, / / Top tab index tabnav: {tabnum: 5, tabitem: [{"id": 0, "text": "Commodity Classification 1"}, {"id": 1, "text": "Commodity Classification 2"}, {"id": 2, "text": "Commodity Classification 3"}, {"id": 3 "text": "Commodity Classification 4"}, {"id": 4, "text": "Commodity Classification 5"}, {"id": 5, "text": "Commodity Classification 6"}, {"id": 6, "text": "Commodity Classification 7"}]}, productList: [],}, onLoad: function () {} SetTab: function (e) {const edata = e.currentTarget.dataset This is the end of this.setData ({showtab: edata.tabindex, slide tab}) "how to achieve the top navigation bar slide tab effect by WeChat Mini Programs". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
