【本节大纲】
（1）滑块视图容器swiper和滑块swiper-item组件
（2）小程序scroll-view实现横向滚动导航
（3）scroll-view满屏滚动
（4）滚动Tab选项卡
视图容器组件
（1）滑块视图容器swiper和滑块swiper-item组件
微信小程序swiper实现滑动放大缩小效果
1. 先将基础轮播图写出来，开启无缝衔接模式circular
<swiper circular="{{circularValue}}" class="bannerArea">
<block wx:for="{{bannerList}}" wx:key="imgSrc">
<swiper-item>
<image src="{{item.imgSrc}}"></image>
</swiper-item>
</block>
</swiper>
.bannerArea{
width: 100%;
height: 400rpx;
}
.bannerArea image{
width: 100%;
height: 400rpx;
border-radius: 9rpx;
}
data: {
bannerList: [
{ imgSrc: 'https://up.enterdesk.com/edpic/a0/6c/56/a06c563866a72c23c6d5e65dbf9f0ecc.jpg' },
{ imgSrc: 'http://img3.imgtn.bdimg.com/it/u=4095043182,117824937&fm=26&gp=0.jpg' },
{ imgSrc: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/00/0A/ChMkJlZqeICIbp_iAAWDtBLmwSoAAGByAFxWdUABYPM819.jpg' },
{ imgSrc: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/00/0A/ChMkJ1ZqeHmIEPu6AAc_ov0pLUsAAGBxwHyDMUABz-6707.jpg' }
],
circularValue:true/**是否采用衔接滑动 */
},
2. 开启指示点
属性：
indicator-dots="{{dotsStatus}}"
indicator-color="{{dotsColor}}"
indicator-active-color="{{dotsActiveColor}}"
值：
dotsStatus: true,/**开启指示点 */
dotsColor: 'rgba(0,0,0,0.2)',/**指示点颜色 */
dotsActiveColor: '#000000',/**激活点颜色 */
效果：
3. 自定义指示点样式
/**自定义焦点样式 */
.bannerArea .wx-swiper-dot{
display: inline-block;
height: 10rpx;
margin-left: 20rpx;
justify-content: space-between;
}
.bannerArea .wx-swiper-dot{
/**.wx-swiper-dot是指示点固定名字，不可更改 */
width: 20rpx;
}
.bannerArea .wx-swiper-dot-active{
/**.wx-swiper-dot是指示点选中状态固定名字，不可更改 */
width: 40rpx;
}
.bannerArea .wx-swiper-dot::before{
content: "";
flex-grow: 1;
background: rgb(255,255,255);
border-radius: 3rpx;
}
.bannerArea .wx-swiper-dot-active::before{
background-color: rgba(255, 0, 0, 0.8);
}
4. 添加前后边距
属性：
previous-margin="{{previousMargin}}"
next-margin="{{nextMargin}}"
previousMargin:'90rpx',/**前边距 */
nextMargin: '90rpx0'/**后边距 */
5. 设置中间激活块的类名active
data:{
swiperIndex: 0
},
/**获取自定义属性data-id */
this.setData({
swiperIndex: event.detail.current
})
},
6. 分开设置激活态与普通状态样式，并添加过渡效果
.bannerArea{
width: 100%;
height: 380rpx;
}
.bannerArea swiper-item{
display: flex;
justify-content: center;
align-items: center;
}
.bannerArea image{
/**普通图片高度缩小显示 */
width: 100%;
height: 360rpx;
border-radius: 9rpx;
transition: all 0.2s linear;/**过度 */
}
.bannerArea image.active{
height: 380rpx;
transition: all 0.2s liner;/**过度 */
}
7. 添加间隙
.bannerArea image{
padding: 0rpx 20rpx;/**添加左右间隙 */
box-sizing: border-box;
}
8. 开启自动轮播
autoplay="{{autoplayValue}}"
interval="{{intervalValue}}"
duration="{{durationValue}}"
autoplayValue: true,/**开启自动播放 */
intervalValue: '3000',/**自动切换时间间隔 */
durationValue: '600'/**滑动动画时长 */
编写缩放类轮播图步骤总结：
①基础轮播图写出来，开启无缝衔接模式circular
②开启指示点
③自定义指示点样式
④添加前后边距
⑤设置中间激活块的类名active
⑥分开设置激活态与普通状态样式，并添加过渡效果
⑦添加间隙
⑧开启自动播放
视图容器组件案例
（2）小程序scroll-view实现滚动导航
1. 小程序scroll-view实现滚动导航
<!-- 小程序scroll-view实现滚动导航 -->
<scroll-view scroll-x="true"
class="scrollList">
<block wx:for="{{scrollArray}}" wx:key="id">
<view>{{item.title}}</view>
</block>
</scroll-view>
/* 滚动导航 */
.scrollList{
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
white-space: nowrap;/**文本不换行 */
position: fixed;
left: 0;
top: 0;
background-color: white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
z-index: 99;
}
.scrollList view{
display: inline-block;
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
data: {
scrollArray:[
{ id: 1, title: '推荐' },
{ id: 1, title: '生活用品' },
{ id: 1, title: '出行用品' },
{ id: 1, title: '食品零食' },
{ id: 1, title: '伴手礼' },
{ id: 1, title: '智能家居' }
],
}
2. 去除横向滚动条
3. 添加对应激活样式
.scrollList view.scrollActive{
color: #e1565b;
position: relative;
}
.scrollList view.scrollActive::after{
content: '';
display: block;
position: absolute;
width: 150rpx;
height: 2rpx;
background-color: #e1565b;
left: 25rpx;
bottom: 0rpx;
}
/**data初始化数据 */
data: {
scrollIndex: 1,
},
4. 添加点击时对应的激活样式
/**导航被选中状态 */
scrollFn(event){
const id = event.currentTarget.dataset.id;
this.setData({
scrollIndex:id
})
},
此时，点击某个导航时会发生状态切换，如下图：
5. 部分机型问题解决
有时点击切换状态时，会发现部分机型上会出现背景，如下所示
方案：在wxss中添加-webkit-tap-highlight-color:rgba(0,0,0,0);
6. 动态设置横向滚动条位置
| 属性 | 类型 | 默认值 | 是否必填 | 作用 |
|---|---|---|---|---|
| scroll-top | number | 无 | 否 | 设置竖向滚动条位置 |
| scroll-left | number | 无 | 否 | 设置横向滚动条位置 |
首先添加scroll-left属性设置初始化水平滚动条位置
data: {
scrollLeft:0,/**水平方向横向滚动条位置 */
},
接下来添加JS方法，设置scroll-view滚动条随点击自动滚动
/**设置scroll-view滚动条随点击自动滚动 */
scrollFn(event){
/**获取可视窗口宽度 */
const viewWidth = wx.getSystemInfoSync().windowWidth;
/**获取导航数量 */
const length = this.data.scrollArray.length;
/**获取当前激活状态的自定义属性data-id的值 */
const id = event.currentTarget.dataset.id;
/**跟随鼠标点击按钮，自动滚动 */
const xValue = (id-2)*viewWidth/length;
console.log(id)
this.setData({
scrollIndex: id,
scrollLeft:xValue
})
},
可以自动滚动后，发现滚动时没有渐变动画效果。给scroll-view添加scroll-with-animation属性即可开启渐变动画。
| 属性 | 类型 | 默认值 | 是否必填 | 作用 |
|---|---|---|---|---|
| scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 |
小程序scroll-view实现滚动导航最终效果→点击时自动滚动相应位置
视图容器组件
（3）scroll-view满屏滚动
- 有时，应客户需要，某些图片需要满屏滚动
- 直接设置height:100不是很好用，原因是因为这个高度没有参照物，以前开发网页是设置body的高度，这里小程序页面渲染容器是Page，所以先设置Page的高度100%，再设置scroll-view高度100%，问题得到解决。
<view>scroll-view满屏滚动</view>
<scroll-view scroll-y="true" class="scrollPage">
<image src="https://up.enterdesk.com/edpic/a0/6c/56/a06c563866a72c23c6d5e65dbf9f0ecc.jpg"></image>
<image src="http://img3.imgtn.bdimg.com/it/u=4095043182,117824937&fm=26&gp=0.jpg"></image>
<image src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/00/0A/ChMkJlZqeICIbp_iAAWDtBLmwSoAAGByAFxWdUABYPM819.jpg"></image>
</scroll-view>
/* scroll-view满屏滚动 */
page{
width: 100%;
height: 100%;
}
.scrollPage,.scrollPage image{
width: 100%;
height: 100%;
}
（4）滚动Tab选项卡—订单页面
分析：订单相关Tab切换页面：所有订单、待付款、待发货、待收货、待评价、退款中
①实现顶部导航点击切换效果，点击时对应激活，滚动条随之滚动
<scroll-view
scroll-x="true"
scroll-with-animation="true"
scroll-left="{{scrollLeft}}"
class="orderList">
<block wx:for="{{orderTopList}}" wx:key="id">
<view data-id="{{item.id}}"
bindtap="scrollTap"
class="{{scrollIndex == item.id?'active':''}}">
{{item.title}}
</view>
</block>
</scroll-view>
/* pages/one/dingdan/dingdan.wxss */
.orderList{
width: 100%;
height: 80rpx;
background-color: #fffcf5;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
position: fixed;
left: 0;
top: 0;
z-index: 99;
white-space: nowrap;
}
.orderList view{
display: inline-block;
margin: 0 20rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
padding: 0 20rpx;
}
/**激活态 */
.orderList view.active{
color: #e1565b;
position: relative;
}
.orderList view.active::after{
content: '';
display: block;
width: 60%;
height: 4rpx;
background-color: #e1565b;
position: absolute;
left: 20%;
bottom: 0rpx;
border-radius: 1rpx;
}
/* 去除滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/**
* 页面的初始数据
*/
data: {
orderTopList:[
{ id: 0, title: '所有订单' },
{ id: 1, title: '待付款' },
{ id: 2, title: '待发货' },
{ id: 3, title: '待收货' },
{ id: 4, title: '待评价' },
{ id: 5, title: '退款中' }
],
scrollIndex:0,
scrollLeft:0
},
/*监听滚动导航点击事件 */
scrollTap(event){
/**获取可视窗口宽度 */
const viewWidth = wx.getSystemInfoSync().windowWidth;
/**获取导航数量 */
const length = this.data.orderTopList.length;
/**获取当前激活状态的自定义属性data-id的值 */
const id = event.currentTarget.dataset.id;
/**跟随点击按钮，自动滚动 */
const xValue = (id-2)*viewWidth/length;
this.setData({
scrollIndex:id,
scrollLeft:xValue
})
},
②设置导航下swiper轮播区域，重点：swiper高度自适应
swiper轮播区域高度自适应，且可以手动左右切换滑动展示页
<!-- 轮播区域 -->
<swiper class="swiperArea"
style="height:{{winHeight}}rpx">
<block>
<swiper-item wx:for="{{swiperAreaInfoList}}" wx:key="index">{{item.info}}</swiper-item>
</block>
</swiper>
/**轮播展示区域 */
.swiperArea{
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.swiperArea swiper-item{
width: 100%;
height: 100%;
}
onLoad: function (options) {
var _this = this;
_this.setData({
swiperItemCount: _this.data.orderTopList.length
})
/**swiper高度自适应 */
wx.getSystemInfo({
success(res){
/**clientHeight与clientWidth为可视物理像素，rpx为像素比 */
var clientHeight = res.windowHeight
var clientWidth = res.windowWidth
var rpxR = 750/clientWidth;
var calc = clientHeight*rpxR-80;/**减去顶部scroll-view导航高度 */
_this.setData({
winHeight:calc
});
}
})
},
③轮播激活项和导航激活项关联起来，即轮播手动切换滑动时，导航对应激活态改变
data: {
swiperAreaInfoList:[
{ id: 0, title: '所有订单' },
{ id: 1, title: '待付款' },
{ id: 2, title: '待发货' },
{ id: 3, title: '待收货' },
{ id: 4, title: '待评价' },
{ id: 5, title: '退款中' }
],
swiperIndex:0,/**当前激活展示的轮播图 */
},
/**切换轮播图 */
changeSwiper(event){
const currentIndex = event.detail.current;
/**swiperIndex为轮播激活项，scrollIndex为导航激活项 */
/**将两者关联起来 */
this.setData({
swiperIndex: currentIndex,
scrollIndex: currentIndex
})
},
此时滑动轮播图，切换时导航也会随之切换
④轮播激活项和导航激活项关联起来，即导航点击相应选项时，底下轮播也对应切换
分析：点击导航对应tab按钮时，下面轮播图切换到对应展示页，这里需要swiper的current属性
| 属性 | 类型 | 默认值 | 是否必填 | 作用 |
|---|---|---|---|---|
| current | number | 0 | 否 | 当前所在滑块的 index |
此时滑动轮播图时，导航对应按钮也会切换；点击导航按钮时，底下轮播图展示区域也会切换
⑤切换轮播图时，上面导航可以切换，但滚动条没有对应滑动，所以接下来添加监听滚动条滑动
⑥当前为止，滑动轮播图时，上面导航滚动条可以实现对应滚动，但最后一张切换回第一张时上面按钮无法对应
此时，在最后一张再往下滑动时，导航按钮处便会返回第一页
⑦此时，便实现了滚动Tab选项卡切换页面，即tab与swiper的双向绑定结合，这也是常见的效果之一
接下来开始在swiper显示页面里，添加相关展示信息 ↓
⑧在swiper展示页中添加展示信息
swiperScrollList:[
{ name: '卫衣', money: 230, count: 1, imgSrc: 'http://img1.imgtn.bdimg.com/it/u=1399391746,4190384143&fm=26&gp=0.jpg' },
{ name: '连衣裙', money: 60, count: 2, imgSrc: 'http://img5.imgtn.bdimg.com/it/u=2009089190,3785896759&fm=26&gp=0.jpg' },
{ name: '帽子', money: 80, count: 3, imgSrc: 'http://img1.imgtn.bdimg.com/it/u=1399391746,4190384143&fm=26&gp=0.jpg' },
{ name: '口罩', money: 254, count: 5, imgSrc: 'http://img5.imgtn.bdimg.com/it/u=2009089190,3785896759&fm=26&gp=0.jpg' },
{ name: '运动鞋', money: 136, count: 1, imgSrc: 'http://img5.imgtn.bdimg.com/it/u=2009089190,3785896759&fm=26&gp=0.jpg' },
{ name: '书包', money: 78, count: 2, imgSrc: 'http://img1.imgtn.bdimg.com/it/u=1399391746,4190384143&fm=26&gp=0.jpg' },
{ name: '铅笔', money: 69, count: 1, imgSrc: 'http://img5.imgtn.bdimg.com/it/u=2009089190,3785896759&fm=26&gp=0.jpg' },
{ name: '篮球', money: 121, count: 3, imgSrc: 'http://img1.imgtn.bdimg.com/it/u=1399391746,4190384143&fm=26&gp=0.jpg' }
]
/**轮播展示区域 */
.swiperArea{
width: 100%;
margin-top: 80rpx;
}
.swiperArea swiper-item{
width: 100%;
height: 100%;
}
.swiperScroll{
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-direction: column;
}
.swiperScroll .orderBox{
width: 100%;
height: 200rpx;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.swiperScroll .orderBox image{
width: 20%;
height: 150rpx;
margin: 0 20rpx;
}
.orderInfoView{
font-size: 32rpx;
color: #888888;
flex-grow: 1;
}
.orderInfoView>view:nth-of-type(1){
margin-top: 25rpx;
display: flex;
justify-content: space-between;
padding: 0 25rpx;
height: 50rpx;
line-height: 50rpx;
}
.orderInfoView>view:nth-of-type(2){
height: 70rpx;
line-height: 70rpx;
padding: 0 25rpx;
display: flex;
justify-content: space-between;
}
.orderBox .orderInfoView>view button{
width: 150rpx;
height: 50rpx;
display: block;
font-size: 30rpx;
padding: 0;
margin: 0;
line-height: 50rpx;
margin-top: 20rpx;
background-color: #e1565b;
color: #fffcf5;
}
渲染结果：
5557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
