微信小程序 滾動插件 hSwiper

功能描述

• 傳入一個數組元素，每個元素就是對應的視圖應該有的數據
• 跟隨手指滑動,手指滑動結束后，智能判斷當前視圖是第幾個視圖，並且將當前視圖顯示在屏幕中央,支持縱向滾動即可
• 每個視圖的寬度可控
• 提供每次滑動結束后的事件
• 提供滑動到第一個視圖的事件，並提供當前是第幾個視圖，對應的視圖數據
• 提供滑動到最后個視圖的事件，並提供當前是第幾個視圖，對應的視圖數據
• 動態的 添加/刪除 視圖元素，
• 每個視圖的內容可以通過模版定制定制，並提供當前是第幾個視圖，對應的視圖數據

演示

地址:Github

文件介紹

    hSwiper.js //插件的核心文件
    hSwiper.wxml //插件的dom結構
    hSwiper.wxss   //插件的css
    hSwiperTemplate.wxml //插件每個元素的模版    

使用方法

下載本插件,在需要使用的page的相關位置導入對應的hSwiper.js,hSwiper.wxss以及hSwiper.wxml即可，具體使用如下

index.js

const hSwiper=require("../../component/hSwiper/hSwiper.js");
var option={
    data:{
        //swiper插件變量
        hSwiperVar:{}
    },
    onLoad:function(){
    },
    onReady:function(){
        //實例化插件
        var swiper=new hSwiper({reduceDistance:60,varStr:"hSwiperVar",list:[1,2,3,4,5]});

        swiper.onFirstView=function(data,index){
            console.log("當前是第"+(index+1)+"視圖","數據是："+data);
        };
        swiper.onLastView=function(data,index){
            console.log("當前是第"+(index+1)+"視圖","數據是："+data);
        };
        swiper.afterViewChange=function(data,index){
            console.log("當前是第"+(index+1)+"視圖","數據是："+data);         
        };
        swiper.beforeViewChange=function(data,index){
            console.log("當前是第"+(index+1)+"視圖","數據是："+data);
        };

        //更新數據 
        setTimeout(()=>{
            console.log("3 s 后更新列表數據");
            //3 s 后更新列表數據
            this.setData({
                "hSwiperVar.list[0]":"修改"
            });
        }, 3000);

        setTimeout(()=>{
            console.log("5s后更新數據 並且更新視圖");
            
            //5s后更新數據 並且更新視圖
            var oldList=swiper.getList();
            swiper.updateList(oldList.concat([11,23,45]));          
        }, 5000);
    }
};

Page(option);

index.wxml

<import src="../../component/hSwiper/hSwiper.wxml"/>

<view id="mainContainer">
    <template is="hSwiper" data="{{...hSwiperVar}}"></template>
</view>

index.wxss

@import "../../component/hSwiper/hSwiper.wxss";


/*滾動圖*/
#mainContainer{
    height: 100%;
    width: 100%;
}

.itemSelf{
    height: 100%;
    position: absolute;
    box-sizing:border-box;
    margin:10rpx;
    overflow: hidden;
    padding: 10rpx;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
    height: 95%;
    width: 96%;
    background-color: gray;
    color: white;
}

hSwiperTemplate.wxml (hswiper視圖元素模版)

每個視圖的內容的wxml都寫在該文件里面，使用 template標簽 ，並且命名 ,當調用這里面的模版時，會自動注入 item以及 index數據，index表示是當前元素的元素索引 ，item則表示當前元素 數據。（相當於list[index]=item，但是 list不會注入到模版里面）

<template name="hSwiperItem">
    <view class="itemSelf">
        {{item}}
    </view> 
</template>

<template name="templateb">
    {{item}}
</template>

hSwiper入口參數解釋

var swiper=new hSwiper({
    reduceDistance:60,
    varStr:"hSwiperVar",
    list:[1,2,3,4,5]
});

• reduceDistance

  類型： Number

  該參數用於確定每個滾動元素的的寬度（默認元素寬度為屏幕寬度），每個元素的寬度為屏寬-reduceDistance，但是沒有配置高度，所以高度需要 用戶自己使用css設置

• varStr (String)

  類型： String

  該參數用於插件操作data下的的數據，是一個data下的變量名的字符串，參考我們的例子index.js,比如 我們這里將 hSwiperVar 變量的控制權 交給 插件，那么 varStr="hSwiperVar"

• list

  類型： Array

  該參數與用於初始化時傳入數據

• templateName

  類型： String

  用於指定元素內容定制的模版名，默認為 'hSwiperItem'，用戶可以在hSwiperTemplate.wxml里面自定模版,然后在此處配置響應的模版,每個模版會注入item，index（參照上面hSwiperTemplate.wxml的解釋）等數據。

接口

• getList()

  返回傳入的數據數組

• updateList(newList)

  更新數據數據,傳入一個新的數據數組，替換舊的的數據

• preView()

  向左跳轉一個視圖

• nextView()

  向右跳轉一個視圖

• getNowView()

  獲取當前視圖的索引,從左往右，從0開始（視圖對應數據的的索引）

• moveViewTo(index)

  跳轉到指定的視圖

事件

item,index為當前視圖的數據，以及索引

• onFirstView(callback(item,index)) 跳轉到第一個視圖時觸發

• onLastView(callback(item,index)) 跳轉到最后一個視圖時觸發

• afterViewChange(callback(item,index)) 視圖跳轉前觸發

• beforeViewChange(callback(item,index)) 視圖跳轉后觸發

具體使用 可查看example文件夾下的例子，有注釋說明。歡迎提問！！！