Shulou(Shulou.com)05/31 Report--

This article mainly introduces how WeChat Mini Programs uses the for cycle to solve the content change problem related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this WeChat Mini Programs how to use the for cycle to solve the content change problem article will have a harvest, let's take a look.

Solution

The overall idea is to create an array, write the page content into the array, use the for loop to achieve the purpose of traversing the array, so as to use the variables of the array to change the content of the page.

Step 1: first create an array called sums in data on the js page, and add content to the array.

Code example:

Data: {sums: [{imgone: "/ pages/img/ under .jpg", imgtwo: "/ pages/img/ Skyline Nine songs .jpg", imgthree: "/ pages/img/ play .png", textone: "under one person", texttwo: "Skyline Nine songs"}, {imgone: "/ pages/img/ Ghost Blade .jpg", imgtwo: "/ pages/img/ Kuiba .jpg" Imgthree: "/ pages/img/ play.png", textone: "Ghost Blade", texttwo: "Kuiba"}, {imgone: "/ pages/img/ is good at teasing Takagi classmate .jpg", imgtwo: "/ pages/img/ soul street .jpg", imgthree: "/ pages/img/ play.png", textone: "Takagi classmate who is good at teasing", texttwo: "Zhenxingjie"}]

Step 2: use the for loop to traverse our array sums.

Code example:

{{item.textone}} {{item.texttwo}}

Take advantage of the array looped by the for loop, where the item represents the elements looped by the array.

Step 3: add css styles.

Code example:

.type-line {display: flex;flex-flow: row;justify-content: space-evenly;} .search {margin-top: 5pxscape width: 160pxscape height: 25pxscape borderhorse radius: 20pxscape backgroundcolor: whitesmoke} .titleone {width: 100% row height: flex;flex-flow: row} .imagesize {width: 20pxposition height: 20px height;} .images {width: 40pxscape height: 40pxscape height left: 15pxscape borderscape radius: 50%;} .boxs {width: 100pxscape height: 30px } .imagesone {margin-left: 60pxash width: 25pxposition height: 25pxscape marginal color top: 5px;} .imageone {margin-top: 20pxbroadth width: 180pxborderhorse height: 150pxborderMurray radius: 10pxscape backgroundcharm color: whitesmoke;}

Final result:

This is the end of the article on "how WeChat Mini Programs uses the for cycle to solve the problem of content change". Thank you for reading! I believe you all have a certain understanding of "how WeChat Mini Programs uses for cycle to solve content change problems". If you want to learn more, you are welcome to follow the industry information channel.

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.