在进行京东联盟,返利微信小程序(Shopping Fan)开发时,首页顶部有一个商品推荐栏位。该栏位设计是,一共展示6到8个值得推荐的商品。因为我们的核心功能(普通商品链接转换为可以返利的商品链接)想放在首屏的中央处。所以,我们将推荐栏位设计成横向的。由于宽度问题,所以就需要用到轮播机制。
代码:
<swiper class="swiper" circular autoplay interval="6000" duration="3000" layout-type="transformer" transformer-type="zoomOut" indicator-dots="{{false}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-colorr="rgba(0, 0, 0, 1)">
<block wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
<block wx:if="{{index % 2 === 0}}">
<swiper-item class="swiper-item">
<view class="cover-item-group">
<template is="tp-coverItem" data="{{...item}}"></template>
<template is="tp-coverItem" data="{{...items[index + 1]}}"></template>
</view>
</swiper-item>
</block>
</block>
微信官方:
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
官方文档很重要!!!有属性,有示例。因为需要两个一起播,所以swiper-item里面放了两个物品。