一、常用的视图容器
1. cover-view
1.1 解释：覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher，只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button
1.2 用处：比如我们用的高德地图，在这样的地图上我们标识了两个按钮，这个按钮就是我们在map上嵌入的视图容器；像我们的爱奇艺、腾讯视频在播放时，在视频上方的按钮都属于这样的视图容器。
2020/03/16南京
2. movable-area与movable-view
2.1 解释：movable-area是movable-view的可移动区域。movable-view是可移动的视图容器，在页面中可以拖拽滑动。必须在 movable-area组件中，并且必须是直接子节点，否则不能移动。也就是说，一个是农场（movable-area)，一个是农场里的绵羊(movable-view)
2.2 用处: 设置一个视图在它的区域内移动，比如我们的windows桌面，里面我们可以拖拽一些界面（我们的视图），再比如蜘蛛纸牌，与之类似，没深究过。
2.3 课上实验
(1) js数据文件
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)
}
movable演示
2.4 提示：关于其他的一些属性，要留意一下，特别注意前几个属性。其中有bindchange 函数要特别注意，一旦movable-view发生移动就会触发该函数,就是你动它也动，你不动它也不动，但是out-of-bounds属性为true(默认false)时会出现你不动了它还动，动几下也就停了。详见movbale-view的属性https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html。
3. scroll-view
3.1 解释：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
3.2 用处：这个最常见，相当于滚动面板，上下滑动，左右滑动，只要打开手机就会用到
3.3 课上实验
（1）js数据文件
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
}
scroll演示
3.4 提示： 在一般开发过程中，这个样式我们要首先考虑到，因为是最外层的布局，所以要优先考虑这个视图容器
这些时我们今天上课的主要内容，下面是要学的视图容器，还有一点，这些小程序最好是自己认真读一遍，我没有放在图片式代码，就是为了给大家省时间好去稍微研究一下代码
4. swiper与swiper-item
4.1 解释： 滑块视图容器。其中只可放置swiper-item（仅可放置在swiper组件中，宽高自动设置为100%。
）组件，否则会导致未定义的行为。
4.2 用处：轮播的功能，常见的软件内的广告轮播
4.3 课前
(1) js数据文件
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
}
swiper演示
4.4 提示：关于swiper的应用最多的是轮播的功能，一般来说掌握基本的熟悉和方法就可以完成相映的功能
5. view
5.1 这是最简单的视图容器，是容器中的弟弟，但大多数的视图都是由这个弟弟完成的，上面的大哥都有自己的本领，只要这里的特别注意它的排版就好了，关于样式的讲解，下回再说。
喜欢就赞一下吧
版权任意
网友评论