微信小程式swiper滑動-仿餓了麼

前言：本篇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)
	}
})