最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同
这里说下,要用swiper做导航菜单,有几个要特别注意的参数
1:autoplay,官方说明【是否自动切换】,这个不填,菜单可不能自己动
2:indicator-dots ,官方说明【是否显示面板指示点】,这个也不填,
3:display-multiple-items,官方说明【同时显示的滑块数量】,敲重点,这个参数必须设为1,要与previous-margin 和next-margin参数来控制焦点高亮图居中
4,previous-margin 和next-margin,官方说明【前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值】【后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值】
5,current,官方说明【当前所在滑块的 index】,主要控制哪一个被选中,比如默认加载第二项或点击某一个让其选中
<view class="container" > <view class="swiper-content"> <swiper class=‘coffeeClassification-box‘ autoplay=‘‘ display-multiple-items=‘{{multipleNums}}‘ previous-margin="240rpx" next-margin="240rpx" current="{{multipleNumIndex}}" bindchange="coffeeClassificationChangeScroll" bindtransition="eventHandles"> <swiper-item class="nav-boxs {{multipleNumIndex == index ? ‘on‘ : ‘‘}}" wx:for="{{menuTwoCon}}" wx:key="{{index}}" bindtap="coffeeClassificationChange" data-id="{{item.id}}" data-index="{{index}}"> <view class=‘item-box‘> <image class="slide-image {{multipleNumIndex == index ? ‘active‘ : ‘‘}}" src="{{item.image}}"/> <text>{{item.product_name}}</text> </view> </swiper-item> </swiper> </view></view>
.item-box{ width: 100%; height: 200rpx; }.item-box image{ width: 100%; height: 200rpx;}.coffeeClassification-box .nav-boxs{ text-align: center; padding-top: 20rpx;}.coffeeClassification-box .nav-boxs.on{ padding-top: 0rpx;}.coffeeClassification-box .nav-boxs .slide-image{ width: 100rpx; height: 80rpx; border: 1px solid #666; margin: 0 auto;}.coffeeClassification-box .nav-boxs .slide-image.active{ width: 180rpx; height: 120rpx; border: 1px solid #ff0000;}.item-box text{ display: block; font-size: 24rpx; }
// pages/memberDetails/memberDetails.jsconst apps = require(‘../../app.js‘)var app = getApp();// const swiper = require(‘./../../utils/swiper/swiper.min.js‘)Page({ /** * 页面的初始数据 */ data: { menuTwoCon:[], multipleNumIndex:0, //默认显示的位置 multipleNums:1, //默认显示数量 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; var data = {} var url = getApp().globalData.url; //接口路径 // console.log("data-------/---", that.data.currentTab); // var tid = e.currentTarget.dataset.tid; var category_id = that.data.currentTabTid; var currentTab = that.data.currentTab; data.category_id ="29" wx.request({ //请求二级分类菜单列表 method: "get", url: url + ‘/Api/lists/module/product/key/dac509bd90a82719a3569291e12c24a6f1af4bac‘, data: data, header: { ‘content-type‘: ‘application/json‘ }, dataType: "json", success: function (res) { var dataSource = [], data = []; res.data.result && res.data.result.map(item => { dataSource.push(item) }) data = dataSource var multipleNumrppg = that.data.multipleNumrppg; that.setData({ // currentTab: menuTwo[0].id, //默认二级分类选中菜单赋值 menuTwoCon: data,//默认二级分类内容 multipleNumIndex: multipleNumrppg }); }, fail: function (res) { // console.log("请求主分类菜单列表3", res) } }) const img = ""; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, coffeeClassificationChangeScroll:function(e){ var that = this console.log("1111", e.detail.current); var multipleNumrppg = e.detail.current; var shopId= that.data.menuTwoCon[multipleNumrppg].id that.setData({ multipleNumIndex: multipleNumrppg }); that.getShopList(shopId) }, coffeeClassificationChange:function(e){ var that = this; var clickId = e.currentTarget.dataset.index; var shopId = e.currentTarget.dataset.shopid; this.setData({ multipleNumIndex: clickId }) that.getShopList(shopId) }, getShopList: function(shopId){ console.log("shopId----->",shopId ); wx.request({data:shopId,url:‘...‘ }) }})
特别说明下,点击选择时,可以直接取自定义的shopid来作为参数传入查询内容方法,
但是在滑动方法时却没办法取自定义的shopid,只能取当前滑块下标,
所以我在coffeeClassificationChange()方法中,用滑块下标来作为导航菜单列表组数的下标条件来取shopid,
var shopId= that.data.menuTwoCon[multipleNumrppg].id
这算是swiper模块的一个小坑吧