④ Banner轮播图
小程序提供了一个滑块视图容器swiper组件，利用它可以实现简单的轮播图。详细官方文档：
developers.weixin.qq.com/miniprogram…
页面结构如下：
<!-- Banner --> <view class="banner-wrapper"> <!-- 轮播图部分 --> <swiper class="banner-swiper"> <block wx:for="{{yx.banner_urls}}"> <swiper-item> <image class="banner_image" src="{{item}}" mode="widthFix"></image> </swiper-item> </block> </swiper> <!-- 当前页数 --> <view class="pagination">1/5</view> </view>
样式调整顺序如下：
- 最外层view宽度100%；
- 轮播图swiper元素高度280rpx;
- 接口返回的轮播图是750px*448px的, 不做处理直接显示会显示不全，可通过裁剪或设置偏移来解决这个问题，每日优鲜采用的 向上负偏移来解决，即向上偏移：280rpx-448rpx=-168rpx。
- 页数使用绝对定位，距离底部15rpx，右侧20rpx，背景rgba(0, 0, 0, 0.3)，圆角24rpx，字体白色#FFFFFF，大小24rpx，内边距8rpx 15rpx。
对应样式文件如下：
.banner-wrapper { width: 100%; position: relative; } .banner-swiper { height: 280rpx; } .banner-item { overflow: hidden; display: block } .banner_image { width: 100%; margin-top: -168rpx; } .pagination { position: absolute; bottom: 15rpx; right: 20rpx; background: rgba(0, 0, 0, 0.3); line-height: 1; padding: 8rpx 15rpx; border-radius: 24rpx; color: #fff; font-size: 24rpx; }
运行结果如下：
不过现在只能手动滑切换图片，接着添加定时自动滑动和页数变化，swiper提供下面三个属性：
- autoplay：是否自动切换。
- interval：自动切换的时间间隔。
- duration：滑动动画时长。
添加上述属性到代码中：
<swiper class="banner-swiper" autoplay="true" interval="5000" duration="5000">
编译后可以看到图片已经能自动滚动了，接着绑定下页面切换的事件，当页面改变时切换右下角那个页数的显示，添加下述代码：
<!-- index.js --> current: 1, onPageChange: function(e) { this.setData({ current: e.detail.current + 1 }) }, <!-- index.wxml --> <swiper ..bindchange="onPageChange"> <view class="pagination">{{current}}/5</view>
运行结果如下：
⑤ 新人福利
页面结构如下：
<!-- 新人福利 --> <view class="welfare"> <view class="welfare-container"> <!-- 顶部图片 --> <image class="welfare-top-image" src="{{yx.welfare_top_url}}"></image> <!-- 商品部分 --> <view class="welfare-goods-container"> <block wx:for="{{yx.welfare_goods}}"> <view class="goods-wrapper"> <image class="goods-image" src="{{item.icon}}"></image> <image class="goods-price" src="{{item.price}}"></image> </view> </block> </view> <!-- 底部图片 --> <image class="welfare-bottom-image" src="{{yx.welfare_bottom_url}}"></image> </view> </view>
先把商品部分的标签注释掉，样式调整顺序如下：
- 最外层设置flex布局，主轴从上往下，item居中，背景白色，上下内间距24rpx；
- 外层设置flex布局，主轴从上往下，item居中，宽690rpx，高434rpx，圆角12rpx，背景颜色#d4545a;
- 顶部图片100%，高度110rpx，左上和右上圆角12rpx;
- 商品部分最外层设置flex布局，主轴从上往下，item居中；
- 商品部分外层宽度660rpx，高度212rpx，圆角12rpx，上下内间距12rpx，左右内间距20rpx；
- 底部图片宽660rpx，高96rpx，圆角12rpx；
对应样式文件如下：
.welfare { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 24rpx 0; } .welfare-container { display: flex; flex-direction:column; align-items:center; width: 690rpx; height: 434rpx; border-radius: 12rpx; background: #d4545a; } .welfare-top-image { width: 100%; height: 110rpx; border-radius: 12rpx 12rpx 0 0; } .welfare-goods { display: flex; flex-direction: column; align-items: center; } .welfare-goods-container { width: 660rpx; height: 212rpx; box-sizing: border-box; border-radius: 12rpx; background: #fff; padding: 12rpx 20rpx; } .welfare-bottom-image{ width: 660rpx; height: 96rpx; border-radius: 12rpx; }
运行结果如下：
接着去掉商品部分的标签注释，调整样式：
- 商品外层设置flex布局，主轴从上往下，item居中，宽度134rpx，高度100%；
- 商品图片宽高130rpx；
- 商品价格宽100%，高56rpx；
.goods-wrapper { display: flex; flex-direction: column; align-items: center; width: 134rpx; height: 100%; } .goods-image { width: 130rpx; height: 130rpx; } .goods-price { width: 100%; height: 56rpx; }
商品直接穿出来了，修改下商品外层布局flex布局，从左网友，两端占满：
.welfare-goods-container { width: 660rpx; height: 212rpx; box-sizing: border-box; border-radius: 12rpx; background: #fff; padding: 12rpx 20rpx; display: flex; flex-direction: row; justify-content: space-between; }
运行结果如下：
