博客

前言：本篇swiper滑动可以根据需要一页显示多少项内容（根据数组渲染的）。除外，还能修改指示点的默认和选中的样式。

饿了么-gif效果图片：

示例-gif效果图片：

wxml:

<view>
	
	<!-- swiper实例 -->
	<view>
		<swiper class="swiper-box" style="height: 280rpx;border: 1px solid red;" indicator-dots="{{indicatorDots2}}" circular="{{circular2}}" interval="{{interval2}}" duration="{{duration2}}">
			<!-- 一级循环 -->
			<black wx:for="{{list}}" wx:key="index">
				<swiper-item style="display: flex;align-items: center;border: 1px solid blue;flex-wrap: wrap;">
					
					<!-- 二级循环 -->
					<block wx:for="{{item}}" wx:key="index" wx:for-item="items">
						<view style="width: 25%;text-align: center;height: 100rpx;">
							<view>{{items.name}}</view>
						</view>
					</block>
					
				</swiper-item>
			</black>
			
		</swiper>
	</view>
	
</view>

wxss:

/* pages/swipers/swiper.wxss */
/* 默认指示点的样式 */

.swiper-box .wx-swiper-dot {
  width: 16rpx;
  height: 4rpx;
  border-radius: 0;
  background: rgb(178, 178, 178);
}

/* 选中指示点的样式 */

.swiper-box .wx-swiper-dot.wx-swiper-dot-active {
  width: 24rpx;
  height: 4rpx;
  background: rgb(23, 174, 230);
}

js:

// pages/swipers/swiper.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		indicatorDots2: true,
		circular2: false,
		interval2: 2000,
		duration2: 500,
		list: [
			[{
					id: 1,
					name: "苹果"
				},
				{
					id: 2,
					name: "沙果"
				},
				{
					id: 3,
					name: "海棠"
				},
				{
					id: 4,
					name: "野樱莓"
				},
				{
					id: 5,
					name: "枇杷"
				},
				{
					id: 6,
					name: "野樱莓11"
				},
				{
					id: 7,
					name: "枇杷11"
				}
			],
			[{
					id: 1,
					name: "欧楂"
				},
				{
					id: 2,
					name: "山楂"
				},
				{
					id: 3,
					name: "雪梨"
				},
				{
					id: 4,
					name: "温柏"
				},
				{
					id: 5,
					name: "蔷薇果"
				}
			],
			[{
					id: 1,
					name: "花楸"
				},
				{
					id: 2,
					name: "樱桃"
				},
				{
					id: 3,
					name: "油桃"
				},
				{
					id: 4,
					name: "李子"
				},
				{
					id: 5,
					name: "白玉樱桃"
				}
			]
		]
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		console.log(this.data.list)
	}
})