How does WeChat Mini Programs realize the scrolling effect of Jinri Toutiao navigation bar
This article introduces the relevant knowledge of "how to achieve the scrolling effect of the navigation bar in Jinri Toutiao". 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!
The implementation code in vue:
{{group.name}} initialization: mounted () {setTimeout (function () {TagNav ("# tagnav", {type: "scrollToNext", curClassName: "weui-state-active", index: 0}); $(".first _ nav") .children (": first") .find ("a") .addClass ("first_border_circle") (".first _ nav") .children (": last") .find ("a") .addClass ("end_border_circle");}, 0);}
Note: the introduction of weui css,class= "container" this must have, otherwise there will be positioning problems.
Elements such as setimeout are rendered and then initialized.
Of course, there was a problem when working on this project. The Android phone entered the page for the first time, but it was sensitive when the navigation bar was not slipped, which caused it to slide, triggered the click event, and led to the jump.
By looking up a lot of information, because iscroll-lite default events such as touchend are bound to window, not to our scrolling elements (example above: div of id= "tagnav"), resulting in
Clicking on another area triggers the click event. Fortunately, it has a configuration item: bindToWrapper. Set this value to true solution.
Because weui is repackaged, you can find it and add: bindToWrapper: true.
Self.iScroll = new IScroll (self.el, {scrollX: true,scrollY: false,click: true,bindToWrapper: true// prevents events such as touchend from binding to window, resulting in sliding sensitive trigger}); this is the end of the content of "how WeChat Mini Programs achieves the scrolling effect of Jinri Toutiao navigation bar". 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!
