您好,登錄后才能下訂單哦!
微信小程序 視圖容器組件詳解:
小程序給出的視圖容器組件有三個(gè):</view>、</scroll-view>和</swiper>:
1、</view> 視圖容器
</view>相當(dāng)于html中的</div>標(biāo)簽,有四個(gè)屬性:
hover和hover-class與點(diǎn)擊效果有關(guān):hover設(shè)置是否啟用點(diǎn)擊效果,而hover-class設(shè)置點(diǎn)擊的效果。
hover-start-time和hover-stay-time與點(diǎn)擊效果的時(shí)間有關(guān):hover-start-time設(shè)置點(diǎn)擊之后點(diǎn)擊效果出現(xiàn)的延遲時(shí)間,hover-stay-time設(shè)置點(diǎn)擊效果持續(xù)的時(shí)間,單位都是毫秒。
創(chuàng)建一個(gè)項(xiàng)目測(cè)試一下:
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; }
效果如下:
設(shè)置了第一個(gè)和第二個(gè)子view的點(diǎn)擊效果,這兩個(gè)點(diǎn)擊效果的時(shí)間有所不同,第二個(gè)的點(diǎn)擊之后延遲出現(xiàn)的時(shí)間更長(zhǎng),而且持續(xù)的時(shí)間也更長(zhǎng)。第三個(gè)沒(méi)有另外的點(diǎn)擊效果,因此是使用的默認(rèn)值,默認(rèn)是沒(méi)有點(diǎn)擊效果的。
2、</scroll-view> 可滾動(dòng)視圖區(qū)域
</scroll-view>有兩類(lèi):橫向滾動(dòng)和縱向滾動(dòng)。</scroll-view>有以下屬性:
同樣,我們創(chuàng)建一個(gè)項(xiàng)目來(lái)了解以上屬性的使用。
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">點(diǎn)擊向下滾動(dòng)</view> <view class="clickItem" bindtap="clickTo">點(diǎn)擊滾動(dòng)到下一個(gè)子view</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 } } }, })
頁(yè)面效果如下:
scroll-y和scroll-x"
首先我們?cè)O(shè)置了</scroll-view>的scroll-y="true",也就是縱向滾動(dòng),在index.wxss中設(shè)置了其高度為200px,里面的每一個(gè)子</view>的高度為100px,正好可以完全容納兩個(gè)完整的子</view>。如果設(shè)置scroll-x="true"則為橫向滾動(dòng)。
scroll-top和scroll-left
scroll-top為豎向滾動(dòng)條位置,默認(rèn)為0;同理scroll-left為橫向滾動(dòng)條位置。上述程序中設(shè)置了scroll-top="{{scrollTop}}",scrollTop從數(shù)據(jù)中獲取。
為了更好的展示,給一個(gè)新的</view>綁定一個(gè)函數(shù):
<view class="clickItem" bindtap="clickAdd">點(diǎn)擊向下滾動(dòng)</view>
函數(shù)遞增改變scrollTop的值:
clickAdd:function(){ this.setData({ scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); },
所以每點(diǎn)擊一次,scrollTop就增加20,因此向下滾動(dòng)20px。
scroll-into-view
scroll-into-view的值為某個(gè)子元素的id,表明滾動(dòng)到該元素,元素頂部對(duì)齊滾動(dòng)區(qū)域頂部。上述程序中設(shè)置了scroll-into-view="{{toView}}",toView從數(shù)據(jù)中獲取。
新建一個(gè)</view>并綁定一個(gè)函數(shù):
<view class="clickItem" bindtap="clickTo">點(diǎn)擊滾動(dòng)到下一個(gè)子view</view> 1
函數(shù)的功能為按順序滾動(dòng)到對(duì)應(yīng)的子元素:
clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } },
其中order為一個(gè)數(shù)組變量,存放著所有子元素的id:
var order = ['green','red', 'blue','yellow'];
bindscrolltolower和bindscrolltoupper
bindscrolltolower和bindscrolltoupper為事件綁定:bindscrolltolower是滾動(dòng)到底部/右邊時(shí)觸發(fā);bindscrolltoupper是滾動(dòng)到頂部/左邊時(shí)觸發(fā)。另外還有一個(gè)bindscroll是只要滾動(dòng)時(shí)就會(huì)觸發(fā)。
以bindscrolltolower為例,bindscrolltolower表示滾動(dòng)到底部或右邊時(shí)觸發(fā),這個(gè)底部或右邊是如何定義的呢?這時(shí)就需要用到lower-threshold,lower-threshold表示距底部/右邊多遠(yuǎn)時(shí)(單位px),觸發(fā) scrolltolower 事件,默認(rèn)值為50,上述代碼中我們定義了lower-threshold="100",由于子</view>的高度就是100px,所以正好出現(xiàn)最后一個(gè)子</view>時(shí)就會(huì)觸發(fā)事件:
3、</swiper> 滑塊視圖容器
</swiper>其實(shí)就是微信小程序封裝的幻燈片輪播功能,并給出了幾個(gè)可供開(kāi)發(fā)者設(shè)置的屬性:
用戶(hù)可以根據(jù)自己需求設(shè)置相應(yīng)的屬性值即可,示例代碼如下:
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); } })
由于綁定了change函數(shù),所以每次切換時(shí),都會(huì)觸發(fā)change事件:
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。