WeChat Mini Program (Component – View Component Case)
Foreword:
(1) Slider view container swiper and slider swiper-item components
(2) Small program scroll-view to realize horizontal scrolling navigation
(3) Scroll-view full screen scrolling
(4) Scrolling Tab
view container component
(1) Slider view container swiper and slider swiper-item component
Wechat applet swiper realizes sliding zoom in and out effect
① Write out the basic carousel first, and turn on the seamless connection mode circular
②Open indicator point: attribute
③Customize the indicator point style
④Add front and rear margins: attribute
⑤Set the class name active of the middle activation block
⑥Separately set the active state and normal state styles, and add transition effects
⑦Add gaps
⑧Enable automatic rotation
Write the zoom class carousel steps
①Write out the basic carousel diagram and turn on the seamless connection mode circular
②Open the indicator point
③Customize the indicator point style
④Add front and rear margins ⑤Set
the class name active of the middle activation block
⑥Set the active state and normal state styles separately, and add Transition effect
⑦ Add gap
⑧ Turn on autoplay
View container component example
(2) Small program scroll-view realizes scrolling navigation
① The small program scroll-view realizes scrolling navigation
② Remove the horizontal scroll bar
Sometimes, the style given by the design diagram does not contain a horizontal scroll bar, so it needs to be removed
③Add the corresponding activation style
④ Add the activation style corresponding to the click
⑤ Solve the problem of some models:
Sometimes when you click to switch the state, you will find that the background appears on some models, as shown below:
Scheme: add -webkit-tap-highlight-color:rgba(0,0,0,0); in wxss;
⑥ Dynamically set the position of the horizontal scroll bar
Next, add the JS method to set the scroll-view scroll bar to automatically scroll with the click.
After automatic scrolling, it is found that there is no gradient animation effect when scrolling. Add scroll-with-animation attribute to scroll-view to enable gradient animation
(2) The small program scroll-view realizes the final effect of scrolling navigation
(3) scroll-view full screen scrolling
Sometimes, in response to customer needs, some pictures need to be scrolled on the full screen.
It is not very useful to directly set height: 100 because there is no reference for this height. In the past, the height of the body was set for developing web pages. Here, the page rendering container of the applet is Page. So first set the height of Page to 100%, and then set the height of scroll-view to 100%, and the problem is solved.
(4) Scroll Tab tab—order page
Analysis:
Order-related tab switching pages: all orders, pending payment, pending shipment, pending receipt, pending evaluation, refunding
① Realize the switching effect of clicking on the top navigation. When clicking, the corresponding activation will be activated, and the scroll bar will scroll accordingly
②Set the swiper carousel area under the navigation, focus: the swiper is highly adaptive
③The carousel activation item is associated with the navigation activation item, that is, when the carousel is manually switched and slid, the corresponding activation state of the navigation changes
④The carousel activation item is associated with the navigation activation item, that is, when the corresponding option is clicked in the navigation, the bottom carousel is also switched accordingly
Analysis: When you click the tab button corresponding to the navigation, the carousel below will switch to the corresponding display page. The current attribute of the swiper is needed here. When you
slide the carousel at this time, the corresponding buttons of the navigation will also switch; when you click the navigation button, the bottom carousel will be displayed The region will also switch
⑤ When switching the carousel, the above navigation can be switched, but the scroll bar does not slide correspondingly, so add a monitoring scroll bar to slide next
⑥So far, when sliding the carousel image, the navigation scroll bar above can realize the corresponding scrolling, but the above button cannot correspond to the last one when switching back to the first one
⑦ At this point, scrolling the Tab tab to switch pages is realized, that is, the two-way binding combination of tab and swiper, which is also one of the common effects
Next, add relevant display information in the swiper display page
⑧Add display information to the swiper display page
Add display information to the swiper display page and render the result
