WeChat applet UI and container components

This article mainly introduces the summary of the mini-app UI and container components. For more information, see Summary of Applet UI and container components

1. Summary and overview

2. container components

2.1 component container (view)

2.2 scroll-view container)

2.3 slider view container (swiper)

1. Summary and overview

1.1 UI component summary

Page. wxml

  
  
   
Horizontal layout:
   
    
   
    
     
Red
    
     
   
    
     
Green
    
     
   
    
     
Blue
    
    
  
 
  
  
   
Vertical layout:
   
    
   
    
     
Red
    
     
   
    
     
Green
    
     
   
    
     
Blue
    
    
  
 

Page. wxss

. Flex-item-red {background-color: red; height: 200rpx; width: 200rpx; text-align: center; line-height: 200rpx ;}. flex-item-green {background-color: green; height: 200rpx; width: 200rpx; text-align: center; line-height: 200rpx }. flex-item-blue {background-color: blue; height: 200rpx; width: 200rpx; text-align: center; line-height: 200rpx }. flex-wrp-row {flex-direction: row; display: flex; margin-left: 10rpx; margin-top: 20rpx ;}. flex-wrp-column {flex-direction: column; display: flex; margin-left: 10rpx; margin-top: 20rpx ;}. color-text {color: snow; font-family: 'Times New Roman ', Times, serif; font-weight: bold ;}. hover-style {background-color: black ;}. row-view-title ,. column-view-title {margin-left: 20rpx; font-family: 'Times New Roman ', Times, serif; font-weight: bold;}/* important attribute: display: flex; // similar to display: box;, it is the latest syntax format of flexbox and has better adaptation effect flex-direction: column; // indicates the vertical layout of the sub-layout flex-direction: row; // indicates that the sub-layout is a horizontal layout */

2.2 scroll-view container)

(1) summary

 
  
   
Horizontal rolling layout
  
 
  
    
     
     
     
    
  
 
 
  
   
Vertical scroll layout
  
 
  
    
     
     
     
    
  
 

Page. wxss

. X_green {background-color: green; width: 500rpx; height: 300rpx; display: inline-flex ;}. x_red {background-color: red; width: 500rpx; height: 300rpx; display: inline-flex ;}. x_blue {background-color: blue; width: 500rpx; height: 300rpx; display: inline-flex ;}. x_yellow {background-color: yellow; width: 500rpx; height: 300rpx; display: inline-flex ;}. y_green {background-color: green; width: 100%; height: 300rpx ;}. y_red {background-color: red; width: 100%; height: 300rpx ;}. y_yellow {background-color: yellow; width: 100%; height: 300rpx ;}. y_blue {background-color: blue; width: 100%; height: 300rpx ;}. scroll-view-x {display: flex; white-space: nowrap; width: 100%; margin-bottom: 20px; margin-top: 10px; height: 300rpx ;}. scroll-view-y {height: 400rpx;}/* important attribute: white-space: nowrap; // Set the display of internal elements without line breaks, and display: inline-flex; the horizontal layout is only available when attributes are used together */

Page. js

// Index. js // Obtain the application instance var app = getApp () // var color_index = ['green', 'red', 'yellow', 'blue']; Page ({data: {toview: 'red',},/* slide to the left to trigger */scrollXToUpper: function () {console. log ('scrollxtoupper ')},/* slide to the right to trigger */scrollXToLower: function () {console. log ('rollxtolower ')},/* slide to the top to trigger */scrollYToUpper: function () {console. log ('scrollytoupper ')},/* slide to the left to trigger */scrollYToLower: function () {console. log ('scrolllytolower')},/* slide trigger */scroll: function () {console. log ("scroll")}, onLoad: function () {console. log ('onload') var that = this },})

2.3 slider view container (swiper)

(1) summary

Page. wxml

Page. js

//game.jsPage({ data: { imgUrls: [  '/image/wechat.png',  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: true, interval: 3000, duration: 1000, current:1, },  durationChange: function(e) { this.setData({  duration: e.detail.value }) }, durationChange: function(e) { this.setData({  duration: e.detail.value }) },itemChangeFunc:function(e){ // console.log(e.target.dataset.current)  console.log(e.detail)}})

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more articles about mini-app UI and container components, please follow PHP Chinese network!