小程序模板網(wǎng)

微信小程序 滾動(dòng)插件 xHSwiper

發(fā)布時(shí)間:2018-04-18 09:36 所屬欄目:小程序開(kāi)發(fā)教程

作者:默識(shí),來(lái)自原文地址

功能描述

  • 傳入一個(gè)數(shù)組元素,每個(gè)元素就是對(duì)應(yīng)的視圖應(yīng)該有的數(shù)據(jù)
  • 跟隨手指滑動(dòng),手指滑動(dòng)結(jié)束后,智能判斷當(dāng)前視圖是第幾個(gè)視圖,并且將當(dāng)前視圖顯示在屏幕中央,支持縱向滾動(dòng)即可
  • 每個(gè)視圖的寬度可控
  • 提供每次滑動(dòng)結(jié)束后的事件
  • 提供滑動(dòng)到第一個(gè)視圖的事件,并提供當(dāng)前是第幾個(gè)視圖,對(duì)應(yīng)的視圖數(shù)據(jù)
  • 提供滑動(dòng)到最后個(gè)視圖的事件,并提供當(dāng)前是第幾個(gè)視圖,對(duì)應(yīng)的視圖數(shù)據(jù)
  • 動(dòng)態(tài)的 添加/刪除 視圖元素,
  • 每個(gè)視圖的內(nèi)容可以通過(guò)模版定制定制,并提供當(dāng)前是第幾個(gè)視圖,對(duì)應(yīng)的視圖數(shù)據(jù)

演示

 

文件介紹
    hSwiper.js //插件的核心文件
    hSwiper.wxml //插件的dom結(jié)構(gòu)
    hSwiper.wxss   //插件的css
    hSwiperTemplate.wxml //插件每個(gè)元素的模版    

使用方法

下載本插件,在需要使用的page的相關(guān)位置導(dǎo)入對(duì)應(yīng)的hSwiper.js,hSwiper.wxss以及hSwiper.wxml即可,具體使用如下

index.js

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

        swiper.onFirstView=function(data,index){
            console.log("當(dāng)前是第"+(index+1)+"視圖","數(shù)據(jù)是:"+data);
        };
        swiper.onLastView=function(data,index){
            console.log("當(dāng)前是第"+(index+1)+"視圖","數(shù)據(jù)是:"+data);
        };
        swiper.afterViewChange=function(data,index){
            console.log("當(dāng)前是第"+(index+1)+"視圖","數(shù)據(jù)是:"+data);         
        };
        swiper.beforeViewChange=function(data,index){
            console.log("當(dāng)前是第"+(index+1)+"視圖","數(shù)據(jù)是:"+data);
        };

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

        setTimeout(()=>{
            console.log("5s后更新數(shù)據(jù) 并且更新視圖");
            
            //5s后更新數(shù)據(jù) 并且更新視圖
            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";


/*滾動(dòng)圖*/
#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視圖元素模版)

每個(gè)視圖的內(nèi)容的wxml都寫(xiě)在該文件里面,使用 template標(biāo)簽 ,并且命名 ,當(dāng)調(diào)用這里面的模版時(shí),會(huì)自動(dòng)注入 item以及 index數(shù)據(jù),index表示是當(dāng)前元素的元素索引 ,item則表示當(dāng)前元素 數(shù)據(jù)。(相當(dāng)于list[index]=item,但是 list不會(huì)注入到模版里面)

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

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

hSwiper入口參數(shù)解釋

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

    類(lèi)型: Number

    該參數(shù)用于確定每個(gè)滾動(dòng)元素的的寬度(默認(rèn)元素寬度為屏幕寬度),每個(gè)元素的寬度為屏寬-reduceDistance,但是沒(méi)有配置高度,所以高度需要 用戶自己使用css設(shè)置

  • varStr (String)

    類(lèi)型: String

    該參數(shù)用于插件操作data下的的數(shù)據(jù),是一個(gè)data下的變量名的字符串,參考我們的例子index.js,比如 我們這里將hSwiperVar 變量的控制權(quán) 交給 插件,那么 varStr="hSwiperVar"

  • list

    類(lèi)型: Array

    該參數(shù)與用于初始化時(shí)傳入數(shù)據(jù)

  • templateName

    類(lèi)型: String

    用于指定元素內(nèi)容定制的模版名,默認(rèn)為 'hSwiperItem',用戶可以在hSwiperTemplate.wxml里面自定模版,然后在此處配置響應(yīng)的模版,每個(gè)模版會(huì)注入item,index(參照上面hSwiperTemplate.wxml的解釋?zhuān)┑葦?shù)據(jù)。

接口

  • getList()

    返回傳入的數(shù)據(jù)數(shù)組

  • updateList(newList)

    更新數(shù)據(jù)數(shù)據(jù),傳入一個(gè)新的數(shù)據(jù)數(shù)組,替換舊的的數(shù)據(jù)

  • preView()

    向左跳轉(zhuǎn)一個(gè)視圖

  • nextView()

    向右跳轉(zhuǎn)一個(gè)視圖

  • getNowView()

    獲取當(dāng)前視圖的索引,從左往右,從0開(kāi)始(視圖對(duì)應(yīng)數(shù)據(jù)的的索引)

  • moveViewTo(index)

    跳轉(zhuǎn)到指定的視圖

事件

item,index為當(dāng)前視圖的數(shù)據(jù),以及索引
  • onFirstView(callback(item,index)) 跳轉(zhuǎn)到第一個(gè)視圖時(shí)觸發(fā)

  • onLastView(callback(item,index)) 跳轉(zhuǎn)到最后一個(gè)視圖時(shí)觸發(fā)

  • afterViewChange(callback(item,index)) 視圖跳轉(zhuǎn)前觸發(fā)

  • beforeViewChange(callback(item,index)) 視圖跳轉(zhuǎn)后觸發(fā)

具體使用 可查看example文件夾下的例子,有注釋說(shuō)明。歡迎提問(wèn)!??!



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23608.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)