Implementation code for the left and right layout of the WeChat applet

In this paper, in a simple small example, it briefly describes the implementation of left and right layout functions in WeChat applet development, mainly involving scroll-view, list data binding, and simple style, for use only for learning sharing.


In WeChat applet, left and right columns (显示 分 分, the right side display details, then linkage) is a common layout method, Apply more in ordering, cold drink stores, takeaway, and other similar malls.

The layout analysis is shown below:


The Scroll-View can be scrolled in the view area.

. When using vertical scrolling, you need to give

a fixed height, and set height through WXSS. The length unit of the component attribute is default to PX, 2.4.0 supports the incoming unit (RPX / PX).
  • whether scroll-y allows longitudinally scrolling, default false.
  • scroll-invo-view value should be a child ID (ID cannot be started with a number). Set which direction can be rolling, then in which direction scroll to the element (dynamically update the value of the attribute, implement the left and right linkage).
  • View infrastructure control.
  • HOVER-CLASS Sets the specified style class. When HOVER-, there is no point of touch.
  • WX: FOR Use wx: for control attribute on the component to bind an array, you can repeatedly render the component using data in arrays. The deadline variable name of the current item of the default array is Default to Index, and the variable name of the array current item is Item.
  • Bindtap = ‘showItem’ Binding components Click event, without incorporated.
  • Example renderings
  • Example renderings are as follows:
Core code

WXML code is as follows:



    The JS code is as follows:   ShowItem: function (event) {var this; var viewid = "d-" + + "+ + event.currentTarget. + "00"; That.SetData ({Viewid: viewid}); console.log (viewid);},     WXSS layout is as follows, mainly used To the box layout (Flex-directions: row;):   .Show-info {height: 100%; Display: flex; flex-direction: ROW ALIGN-ITEMS: Flex-start; Padding: 10rpx 0; Box-Siting: Border-Box;}. ​​Left{Width: 30%; Height: 100%; Display: flex; flex-direction: column; margin: 2px;}. jy-item-hover {border: none;}. Right {Width: 70%; Height: 1200 rpx; Display: flex; flex-direction: column; margin: 2px;}   The above is all the content of this article, I hope that everyone's learning is helpful, I hope everyone will Support TUMI cloud.                     
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment