Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use WeChat Mini Programs's common view container components". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought slowly and deeply. Let's study and learn how to use WeChat Mini Programs's common view container components.

1. Overview of components

Component is the basic unit of view layer, with UI style and specific functional effects. When a Mini Program is opened, pictures, text and other elements in the interface need to use components. Mini Program components are flexible to use, and the components are designed by nesting each other. Developers can design different interface effects through the selection of components and style attributes. A component includes a start tag and an end tag, and attributes are used to decorate the style of the component.

The syntax format is as follows:

Content

2. Commonly used attempt container components

The View Container (View Container) component is used for typesetting pages to provide carriers for other components. Common view containers are View, scroll-view, swiper, and so on.

2.1 view

The view container is the most basic container component in a page, defining the container size by its height and width. The equivalent of HTML tags, is the outermost container in a page, can accept the embedding of other components, for example, the nesting of multiple view containers. The view container can define how internal items are arranged through the flex layout.

The properties are shown in the following table

2.1.1 case

This example designs the click state of two sets of father-son view containers. The first group of father-son view containers seed view container does not prevent the click state from being transferred to the parent container, and the second group of father-son view container neutron view container prevents the click state from being transferred to the parent container.

The pages/view/view.wxml code is as follows:

1.view small case (1) does not block the view-hover of the parent container I am the parent container I am the subclass container (2) block the view-hover of the parent container I am the parent container I am the subclass container

The pages/view/view.wxss code is as follows:

.view-parent {width: 100%; height: 350rpx; background-color: pink; text-align: center;}. View-son {width: 50%; height: 200rpx; background-color: skyblue; margin: 20rpx auto; text-align: center;}. View-hover {background-color: red;}

App.wxss

.demo-box {padding: 20rpx; margin: 20rpx 60rpx; border: 1rpx solid gray;}. Title {display: flex; flex-direction: row; margin: 20rpx; justify-content: center;}

Initial effect of the page

Click the first group of subcontainers

Click the second group of subcontainers

Two groups of containers are placed in view.wxml. In the app.wxss file, the background color of the parent container is light red, and the background color of the child container is light blue. The attribute is added to the tag through hover-class= "view-hover". The click state is set to update the background color to red after clicking. The first group does not prevent the click state from being passed to the parent container. In the second group of sub-category containers, the click state is transferred to the parent container through hover-stop-propagation. And set the properties hover-start-time= "3000" and hover-stay-time= "4000". When you click on the sub-container, the click state appears after 3 seconds, and when the finger is released from the 4ss, the background color of the sub-container is programmed into the initial color.

2.2 scroll-view

The scroll-view container is a scrollable view container that allows users to change the display area by sliding their fingers over the container. The common sliding directions are horizontal sliding and vertical sliding. Its property table is shown below.

Note: when using vertical scrolling, you need to set a fixed width for

2.2.1 case

Pages/scroll-view/scroll-view.wxml

2.scroll-view small case to achieve vertical scrolling element one element two elements three elements four elements five elements six

Pages/scroll-view/scroll-view.wxss

Scroll-view {height: 600rpx; width: 250rpx; margin: 0 auto;} .text-align-item-y {height: 200rpx; line-height: 200rpx; text-align: center; background-color: skyblue; border: 1px solid gray;}

This example sets the component in the scroll-view.wxml file, allows the component to slide up and down by setting the property scroll-y, and sets its height to 600rpx in the scroll-view.wxss file, so that the scroll-view component can slide longitudinally, and six groups are nested in the scroll-view file to display the scrolling effect. The width of the internal elements is 250rpx.

Before sliding:

After sliding:

2.3 swiper

The component is a slider view container, which is usually used for switching and playing between pictures, which is called a broadcast image. Its property sheet is shown in the figure.

2.3.1 case

Effect picture:

Pages/swiper/swiper.wxml

3.swiper small case picture to switch between pages

Pages/swiper/swiper.wxss

Swiper {height: 350rpx;}

This example puts the component in the swiper.wxml file, the component property autoplay allows you to automatically switch the picture, set the property interval= "3000", the picture is switched every 3 seconds, the attribute indicator-dots is used to display the panel knowledge points, 3 groups are nested in the component, and the height of the swiper container is set to 300rpx.

Thank you for your reading, the above is the content of "how to use WeChat Mini Programs common view container components". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs commonly used view container components are used. the specific use also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.