微信小程序swiper滑动-仿饿了么

古城微笑少年丶 2021-07-25 01:50 586阅读 0赞

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

--------------------

饿了么-gif效果图片：  
![在这里插入图片描述][20200120103600666.gif]

--------------------

示例-gif效果图片：  
![在这里插入图片描述][20200120103640278.gif]

--------------------

**wxml:**

<view>
    	
    	
    	<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)
    	}
    })

[20200120103600666.gif]: /images/20210724/f08d424346e14554a944430aa09ab7e7.png
[20200120103640278.gif]: /images/20210724/de8503514843457d83f6a65885f7a9e7.png