關(guān)于微信小程序的視圖控件，今天帶給大家系統(tǒng)的解讀和示范捡絮，相信看完后都可以輕松用好了熬芜。****首先看一下這個(gè)示例程序的運(yùn)行效果。
大家可以看到福稳，有三個(gè)視圖涎拉，分別用不同的配置和使用方式。接下來我們具體展開來介紹。我們先新建一個(gè)項(xiàng)目鼓拧，在首頁添加三個(gè)****navigator導(dǎo)航按鈕半火，分別跳轉(zhuǎn)到對(duì)應(yīng)的組件示范頁面。
index頁面的WXML代碼如下：
<!--index.wxml-->
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view class="viewName">
<navigator url="Component/View/View">
<text class="view-Name">View組件示范</text>
</navigator>
</view>
<view class="viewName">
<navigator url="Component/ScrollView/ScrollView">
<text class="view-Name">Scroll-View組件示范</text>
</navigator>
</view>
<view class="viewName">
<navigator url="Component/Swiper/Swiper">
<text class="view-Name">Swiper組件示范</text>
</navigator>
</view>
index頁面的JS代碼如下：
var app = getApp()
Page({
data: {
motto: '基礎(chǔ)視圖View季俩，滑動(dòng)視圖ScrollView钮糖，滑塊Swiper',
userInfo: {}
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
index頁面的WXSS樣式代碼如下：
/**index.wxss**/
.usermotto {
margin-top: 30px;
font-size: 20px;
}
.viewName{
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
height: 50px;
font-size: 25px;
background-color: #AED2EE;
/**下面是設(shè)置三個(gè)view視圖的文本內(nèi)容上下左右居中**/
justify-content: center;
display: flex;
align-items: center;
}
另外我們要提醒一下，因?yàn)槊總€(gè)頁面都會(huì)用到一些相同的樣式酌住，這樣的情況下店归，可以把這些樣式提取出來放在app.wxss文件中，作為公共樣式酪我。
本示例Demo中的公共樣式如下消痛，寫在app.wxss中。
/**app.wxss**/
page {
background-color: #fbf9fe;
height: 100%;
}
/**在這里可以把整個(gè)小程序所有頁面用到的公共樣式放在這里都哭，便于每個(gè)頁面直接調(diào)用**/
.viewTitle{
margin-top: 20px;
height: 40px;
text-align: center;
}
.bc_green{
background-color: #09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}
第一秩伞、基礎(chǔ)視圖View組件頁面，頁面截圖如下：
View頁面的WXML代碼如下：
<!--View.wxml-->
<!--更多源碼請于51小程序源碼版塊下載：[url]http://bbs.html51.com/f-36-1/-->[/url]
<view class="viewTitle">
<text>View展示</text>
</view>
<!--樣式一质涛，橫向排列-->
<view class="section">
<view class="section__title">樣式一稠歉，橫向排列</view>
<view class="flex-wrp">
<view class="flex-item bc_green">111</view>
<view class="flex-item bc_red">222</view>
<view class="flex-item bc_blue">333</view>
</view>
</view>
<!--樣式二，豎向排列汇陆。下面的style="height:300px"樣式怒炸，也可以在 .wxml的文件中進(jìn)行樣式設(shè)計(jì)-->
<view class="section">
<view class="section__title">樣式二，豎向排列</view>
<view class="flex-wrp" style="height:300px">
<!--下面的view有2個(gè)class 一個(gè)是來之View.wxss文件定義的樣式毡代，一個(gè)是總的樣式文件app.wxss定義的樣式-->
<view class="flex-item bc_green" style="margin-top: 0px">111</view>
<view class="flex-item bc_red" style="margin-top: 100px">222</view>
<view class="flex-item bc_blue" style="margin-top: 200px">333</view>
</view>
</view>
View頁面的WXSS代碼如下：
/**View.wxss**/
.flex-wrp{
height: 100px;
display: flex;
background-color: #ffffff;
}
/**
這里定義了一個(gè)樣式阅羹，另外在總的小程序app.wxss中也可以定義通用的樣式，可以應(yīng)用到每個(gè)頁面中教寂。
**/
.flex-item{
width: 100px;
height: 100px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
因?yàn)檫@里是演示View組件捏鱼，所有沒有JS代碼。效果酪耕，可以查看最頂部的動(dòng)畫效果圖导梆。第二、滑動(dòng)視圖組件頁面的截圖如下：
ScrollView頁面的WXML代碼如下：
<!--ScrollView.wxml-->
<view class="viewTitle">
<text class="titleName">ScrollView視圖展示</text>
</view>
<!--樣式一迂烁，豎向滑動(dòng)-->
<view class="section">
<view class="section__title">樣式一看尼，豎向滑動(dòng)Vertical</view>
<view class="flex-wrp">
<!--bindscrolltoupper后面的參數(shù)可以不寫，在.js文件中
有對(duì)應(yīng)的交互方法-->
<scroll-view scroll-y="true" style="height: 200px;"
bindscrolltoupper="upper" bindscrolltolower="lower"
bindscroll="scroll" scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}">
<!--這里的id用來js中找到對(duì)應(yīng)的顯示視圖盟步，如果不進(jìn)行js中data的{{toView}}
的數(shù)據(jù)交互藏斩，顯示的是藍(lán)黃紅綠，如果進(jìn)行js數(shù)據(jù)交互却盘，那么初始化時(shí)顯示的是
最下面的綠-->
<view id="blue" class="scroll-view-item bc_blue"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="green" class="scroll-view-item bc_green"></view>
</scroll-view>
</view>
</view>
<!--樣式二狰域，橫向滑動(dòng)-->
<view class="section">
<view class="section__title">樣式二媳拴，橫向滑動(dòng)Horizontal</view>
<view class="flex-wrp">
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
</view>
ScrollView頁面的JS代碼如下：
//ScrollView.js
var order = ['green', 'red', 'yellow', 'blue', 'green']
Page({
})
ScrollView頁面的WXSS代碼如下：
/**ScrollView.wxss**/
/**更多源碼請于51小程序源碼版塊下載：[url]http://bbs.html51.com/f-36-1/[/url]**/
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 200px;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 200px;
}
.flex-wrp{
height: 200px;
display: flex;
background-color: #ffffff;
}
此頁面的效果，可以查看最頂部的動(dòng)畫效果圖兆览。第三屈溉、Swiper****視圖組件頁面的截圖如下：
這樣頁面相對(duì)比較復(fù)雜，可以看到一個(gè)滑塊視圖拓颓，3個(gè)按鈕控制不同的顯示狀態(tài)语婴，另外2個(gè)滑動(dòng)條，控制滑塊視圖切換時(shí)的快慢驶睦。具體如下代碼和解讀：Swiper頁面的WXML代碼如下：
<!--Swiper.wxml-->
<view class="viewTitle">
<text class="titleName">Swiper視圖展示</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}"
duration="{{duration}}">
<block wx:for="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="btn-area">
<button type="default" bindtap="changeIndicatorDots">
顯示/取消指示點(diǎn)</button>
<button type="default" bindtap="changeVertical">
{{vertical?'橫顯示':'豎顯示'}}</button>
<button type="default" bindtap="changeAutoplay">
開始/停止輪播</button>
</view>
<slider bindchange="durationChange" value="{{duration}}"
show-value min="200" max="2000"/>
<view class="section__title">輪播一次的時(shí)間duration</view>
<slider bindchange="intervalChange" value="{{interval}}"
show-value min="1000" max="10000"/>
<view class="section__title">間隔多長時(shí)間顯示下一個(gè)圖interval</view>
</view>
Swiper頁面的JS代碼如下：
//Swiper.js
Page({
data: {
background: ['green', 'red', 'yellow'],
indicatorDots: true, //布爾值變量砰左，用于控制顯示/取消指示點(diǎn)
vertical: false, //根據(jù)這個(gè)布爾值的真假，控制滑塊視圖场航，橫顯示或者豎顯示
autoplay: false, //通過這個(gè)開關(guān)控制缠导，是否開始輪播，或者停止輪播
interval: 3000, //設(shè)置間隔多長時(shí)間顯示下一個(gè)圖
duration: 1200 //設(shè)置輪播一次的時(shí)間
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeVertical: function (e) {
this.setData({
vertical: !this.data.vertical
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
Swiper頁面的WXSS代碼如下：
/**Swiper.wxss**/
.swiper-item{
display: block;
height: 150px;
}
基本整個(gè)項(xiàng)目代碼都在這里了溉痢。大家可以看一下僻造。當(dāng)然如果希望下載源碼運(yùn)行后看效果的話。
下面網(wǎng)頁中可以下載源碼：
http://bbs.html51.com/t-505-1-1/
具體運(yùn)行方法大家應(yīng)該都清楚吧孩饼。如果不知道髓削，可以點(diǎn)擊查看這片文章：
如何使用下載的微信小程序源碼，來運(yùn)行Demo程序
