一晰搀、常用的視圖容器
1. cover-view
1.1 解釋：覆蓋在原生組件之上的文本視圖“彀撸可覆蓋的原生組件包括 map外恕、video、canvas俄周、camera吁讨、live-player、live-pusher峦朗，只支持嵌套 cover-view、cover-image排龄，可在 cover-view 中使用 button
1.2 用處：比如我們用的高德地圖波势，在這樣的地圖上我們標識了兩個按鈕，這個按鈕就是我們在map上嵌入的視圖容器橄维；像我們的愛奇藝尺铣、騰訊視頻在播放時，在視頻上方的按鈕都屬于這樣的視圖容器争舞。
2. movable-area與movable-view
2.1 解釋：movable-area是movable-view的可移動區(qū)域凛忿。movable-view是可移動的視圖容器，在頁面中可以拖拽滑動竞川。必須在 movable-area組件中店溢，并且必須是直接子節(jié)點叁熔，否則不能移動。也就是說床牧，一個是農(nóng)場（movable-area)荣回，一個是農(nóng)場里的綿羊(movable-view)
2.2 用處: 設(shè)置一個視圖在它的區(qū)域內(nèi)移動，比如我們的windows桌面戈咳，里面我們可以拖拽一些界面（我們的視圖）心软，再比如蜘蛛紙牌，與之類似著蛙，沒深究過删铃。
2.3 課上實驗
(1) js數(shù)據(jù)文件
Page({
data: {
x: 0,
y: 0,
ismove:true
},
tap: function (e) {
this.setData({
x: 30,
y: 30
});
},
onChange: function (e) {
console.log(e.detail)
console.log(e)
},
onScale: function (e) {
console.log(e.detail)
console.log(e)
},
})
(2) wxml界面文件
<view>
<movable-area class="area1">
<movable-view class="view1" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2" inertia="false" out-of-bounds="ture">
<text style="color:white">移動</text>
</movable-view>
</movable-area>
</view>
(3) wxss樣式文件
.area1{
height: 800rpx;
width: 500rpx;
background-color: #27bbf5
}
.view1{
height: 100rpx;
width: 100rpx;
background-color: rgb(46, 87, 221)
}
2.4 提示：關(guān)于其他的一些屬性，要留意一下踏堡，特別注意前幾個屬性泳姐。其中有bindchange 函數(shù)要特別注意，一旦movable-view發(fā)生移動就會觸發(fā)該函數(shù),就是你動它也動暂吉，你不動它也不動胖秒，但是out-of-bounds屬性為true(默認false)時會出現(xiàn)你不動了它還動，動幾下也就停了慕的。詳見movbale-view的屬性https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html阎肝。
3. scroll-view
3.1 解釋：可滾動視圖區(qū)域。使用豎向滾動時肮街，需要給scroll-view一個固定高度风题，通過 WXSS 設(shè)置 height。
3.2 用處：這個最常見嫉父，相當(dāng)于滾動面板沛硅，上下滑動，左右滑動绕辖，只要打開手機就會用到
3.3 課上實驗
（1）js數(shù)據(jù)文件
Page({
data: {
},
upper(e) {
console.log(e)
},
lower(e) {
console.log(e)
},
scroll(e) {
console.log(e)
},
scrollToTop() {
this.setAction({
scrollTop: 0
})
},
tap() {
for (let i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
})
break
}
}
},
tapMove() {
this.setData({
scrollTop: this.data.scrollTop + 10
})
},
})
(2) wxml界面文件
<view class="page-section-spacing">
<text>上下滑動</text>
<scroll-view scroll-y="true" style="height: 450rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
<view class="scroll-view-item">第一個</view>
<view class="scroll-view-item">第二個</view>
<view class="scroll-view-item">第三個</view>
</scroll-view>
</view>
<view class="page-section-spacing">
<text>左右滑動</text>
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 600rpx">
<view class="scroll-view-item_H demo-text-1">第一個</view>
<view class="scroll-view-item_H demo-text-2">第二個</view>
<view class="scroll-view-item_H demo-text-3">第三個</view>
</scroll-view>
</view>
(3) wxss樣式表文件
.page-section-spacing{
margin-top: 60rpx;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
width: 600rpx;
height: 300rpx;
background-color: rgb(38, 197, 236);
margin-top: 20rpx
}
.scroll-view-item_H{
display: inline-block;
width: 300rpx;
height: 500rpx;
background-color: rgb(55, 233, 1);
margin-left: 20rpx
}
3.4 提示： 在一般開發(fā)過程中摇肌，這個樣式我們要首先考慮到，因為是最外層的布局仪际，所以要優(yōu)先考慮這個視圖容器
這些時我們今天上課的主要內(nèi)容围小，下面是要學(xué)的視圖容器，還有一點树碱，這些小程序最好是自己認真讀一遍肯适，我沒有放在圖片式代碼，就是為了給大家省時間好去稍微研究一下代碼
4. swiper與swiper-item
4.1 解釋： 滑塊視圖容器成榜。其中只可放置swiper-item（僅可放置在swiper組件中框舔，寬高自動設(shè)置為100%。
）組件，否則會導(dǎo)致未定義的行為刘绣。
4.2 用處：輪播的功能樱溉，常見的軟件內(nèi)的廣告輪播
4.3 課前
(1) js數(shù)據(jù)文件
Page({
data: {
background: [{ num: "1" }, { num: "2" }, { num: "3" },{ num: "4" }, { num: "5" },],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
},
changeIndicatorDots() {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay() {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
this.setData({
interval: e.detail.value
})
},
durationChange(e) {
this.setData({
duration: e.detail.value
})
}
})
(2) wxml界面文件
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-{{item.num}}">
<text class="text1">廣告招租啦</text>
</view>
</swiper-item>
</block>
</swiper>
<view>
<view class="view1">
提示點 <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
</view>
<view class="view1">
自動播放 <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
</view>
</view>
(3)wxss樣式文件
.swiper-1{
background-color: rgb(85, 165, 231);
height: 300rpx;
}
.swiper-2{
background-color: rgb(70, 194, 80);
height: 300rpx;
}
.swiper-3{
background-color: rgb(218, 126, 210);
height: 300rpx;
}
.swiper-4{
background-color: rgb(106, 236, 245);
height: 300rpx;
}
.swiper-5{
background-color: rgb(255, 144, 80);
height: 300rpx;
}
.view1{
flex-direction: row;
display: flex;
justify-content: space-between;
margin: 20rpx 0 0 20rpx
}
.text1{
color:white;
font-size: 40rpx;
margin: 40rpx 0 0 0
}
4.4 提示：關(guān)于swiper的應(yīng)用最多的是輪播的功能，一般來說掌握基本的熟悉和方法就可以完成相映的功能
5. view
5.1 這是最簡單的視圖容器额港，是容器中的弟弟饺窿，但大多數(shù)的視圖都是由這個弟弟完成的，上面的大哥都有自己的本領(lǐng)移斩，只要這里的特別注意它的排版就好了肚医，關(guān)于樣式的講解，下回再說向瓷。
喜歡就贊一下吧
版權(quán)任意
