WeChat applet View Details of container components and instance code, Applet View

The container component details and instance code in the applet view, and the applet View

Details about the container components in the applet View:

The applet provides three view container components: </view>, </scroll-view>, and </swiper>:

1. </view> view container

</View> is equivalent to the </div> tag in html. It has four attributes:

Hover and hover-class are related to the click effect: hover sets whether to enable the click effect, while hover-class sets the click effect.

Hover-start-time and hover-stay-time are related to the time when the click effect is clicked. hover-start-time sets the delay time when the click effect is clicked, hover-stay-time sets the duration of the click effect, in milliseconds.

Create a project and test it:

Index. wxml

<view class="container"> <view class="flex-item bc_green" hover="true" hover-class="green_hover">1</view> <view class="flex-item bc_red" hover="true" hover-class="red_hover" hover-start-time="400" hover-stay-time="1000">2</view> <view class="flex-item bc_blue">3</view></view>

Index. wxss

.flex-item{ width: 100%; height: 100px; box-sizing: border-box;}.bc_green{ background-color: green;}.bc_red{ background-color: red;}.bc_blue{ background-color: blue;}.green_hover{ border: 5px solid black;}.red_hover{ border: 5px solid black;}

The effect is as follows:

The click effects of the first and second sub-views are set. The two clicks have different effects for a longer time, and the delay of the second click is longer. The third option has no other Click effect, so the default value is used. By default, there is no click effect.

2. </scroll-view> scrollable view area

</Scroll-view> two types are available: horizontal scroll and vertical scroll. </Scroll-view> has the following attributes:

Similarly, we create a project to understand the usage of the above attributes.

Index. wxml

<View class = "container"> <scroll-view class = "srcoll_view" scroll-y = "true" lower-threshold = "100" bindscrolltolower = "lower" scroll-top = "{scrollTop }}" scroll-into-view =" {toView} "> <view id =" green "class =" flex-item bc_green "> 1 </ view> <view id = "red" class = "flex-item bc_red"> 2 </view> <view id = "blue" class = "flex-item bc_blue"> 3 </view> <view id = "yellow" class = "flex-item bc_yellow"> 4 </view> </scroll-view> <view class = "clickItem" bindtap = "clickAdd"> click to scroll down </view> <view class = "clickItem" bindtap = "clickTo"> click to scroll down to the next sub-view </view>

Index. wxss

.srcoll_view{ height: 200px;}.flex-item{ width: 100%; height: 100px; box-sizing: border-box;}.bc_green{ background-color: green;}.bc_red{ background-color: red;}.bc_blue{ background-color: blue;}.bc_yellow{ background-color: yellow;}.clickItem{ margin-top: 20px; background-color: grey; height: 20px; border-radius: 5px;}

Index. js

var app = getApp();var order = ['green','red', 'blue','yellow','green'];Page({ data: { scrollTop: 0, toView:"green" }, onLoad: function () { }, lower: function(e) { console.log(e) }, clickAdd:function(){ this.setData({  scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); }, clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({  toView: order[i + 1] }) break } } },})

The page effect is as follows:

Scroll-y and scroll-x"

First, we set scroll-y = "true" of </scroll-view>, that is, vertical scrolling, in the index. in wxss, the height is set to PX, and the height of each sub </view> is PX, which can fully accommodate two complete sub-views </view>. Scroll horizontally if scroll-x = "true" is set.

Scroll-top and scroll-left

Scroll-top indicates the vertical scroll bar position. The default value is 0. Similarly, scroll-left indicates the horizontal scroll bar position. Scroll-top = "{scrollTop}" is set in the above program, and scrollTop is obtained from the data.

For better display, bind a function to a new </view>:

<View class = "clickItem" bindtap = "clickAdd"> click to scroll down </view>

The function incrementally changes the value of scrollTop:

clickAdd:function(){ this.setData({  scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); },

Therefore, each click increases by 20 for scrollTop, and 20 PX is scrolled down.

Scroll-into-view

The value of scroll-into-view is the id of a child element, indicating that the element is scrolled to and the top of the element is aligned to the top of the scroll area. Scroll-into-view = "{toView}" is set in the above program, and toView is obtained from the data.

Create a new </view> and bind a function:

<View class = "clickItem" bindtap = "clickTo"> click to scroll to the next sub-view </view> 1

The function is used to scroll to the corresponding child element in sequence:

clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({  toView: order[i + 1] }) break } } },

Here, order is an array variable that stores the IDs of all child elements:

var order = ['green','red', 'blue','yellow'];

Bindscrolltolower and bindscrolltoupper

Bindscrolltolower and bindscrolltoupper bind events: bindscrolltolower is triggered when it is rolled to the bottom/right; bindscrolltoupper is triggered when it is rolled to the top/left. There is also a bindscroll that will be triggered as long as it is rolled.

Taking bindscrolltolower as an example, bindscrolltolower indicates that it is triggered when it is rolled to the bottom or right. How is this defined at the bottom or right? In this case, you need to use lower-threshold. lower-threshold indicates that the scrolltolower event is triggered when the distance from the bottom to the right (unit: px). The default value is 50, the above Code defines lower-threshold = "100", because the height of the sub-</view> is PX, so the event is triggered when the last sub-view appears:

3. </swiper> slider view container

</Swiper> it is actually a slide slideshow function encapsulated by a applet, and provides several attributes that can be set by developers:

You can set the attribute values as needed. The sample code is as follows:

Swiper. wxml

<view class="container"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="change"> <block wx:for="{{imgUrls}}">  <swiper-item>  <image src="{{item}}" />  </swiper-item> </block> </swiper></view>

Swiper. wxss

swiper{ height: 150px; width:100%;}

Swiper. js

Page({ data: { imgUrls: [ '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: 2000, duration: 500, circular:true }, change:function(e){ console.log(e); }})

Because the change function is bound, the change event is triggered every time you switch over:

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