Wechat applet package pull-up load and pull-down refresh components

Time:2020-3-31

Wechat applet encapsulationPull up loadingDrop-down refreshassembly

Effect GIF diagram

Drop-down refreshWechat applet package pull-up load and pull-down refresh componentsPull up loadingWechat applet package pull-up load and pull-down refresh components

Custom pull-up loading and pull-down refresh component encapsulation

scroll.wxml

<video/>
<scroll-view class="message scroll-view client-pool-list" scroll-y="{{true}}" lower-threshold="1" bindtouchstart="touchstart" bindtouchmove="touchmove">
    <view class="pull-refresh {{pull.isLoading ? 'chu' : 'jin'}}" id="pull-refresh">
        <image class="icon-refresh z-index-1" />
        <view class="fs24 pt20 f-color-666 z-index-1">{{pull.pullText}}</view>
    </view>
    < slot > < / slot > <! -- slot accepts content -- >
    <view class="pull-refresh">
        <image class="icon-refresh z-index-1" wx:if="{{push.isLoading}}" />
        <view class="fs24 f-color-666 z-index-1">{{push.pullText}}</view>
        </view>
    </scroll-view>

scroll.js

Component({
    options: {
        Multipleslots: true, // enable multislot support in the options when building a definition
    },
    /**
    *Property list of component
    */
    properties: {
        listLength: {
            type: Number,
            value: 0
        },
        pull: {
            type: Object,
            value: {}
        },
        push: {
            type: Object,
            value: {}
        }
    },
    /**The lifecycle declaration object of the page where the component is located*/
    pageLifetimes: {
        Show() {// the page is displayed
            this.setData({
                pull: this.properties.pull,
                push: this.properties.push,
            })
        },
    },
    /**
     *Initial data of components
     */
    data: {
        pull: {},
        push: {},
        slideStart: [],
        moveTime: 0,
    },
    /**Custom method*/
    methods: {
        /**Start sliding*/
        touchstart(e) {
            /**Record when the slide started*/
            this.setData({
                slideStart: e.touches[0]
            })
        },
        * * sliding * /
        touchmove(e) {
            Let movetime = new date(). Gettime(); // current time
            if (moveTime - this.data.moveTime <= 2000) {
                return
            } else {
                this.setData({
                    moveTime: moveTime
                })
            }
            let slideStart = this.data.slideStart;
            let slideMove = e.touches[0];
            let startX = slideStart.pageX;
            let startY = slideStart.pageY;
            let moveEndX = slideMove.pageX;
            let moveEndY = slideMove.pageY;
            let X = moveEndX - startX;
            let Y = moveEndY - startY;
            If (math. ABS (y) > math. ABS (x) & & Y > 0) {// slide up
                console.log("top 2 bottom");
                this.pullRefresh()
            }Else if (math. ABS (y) > math. ABS (x) & & Y < 0) {// slide up
                console.log("bottom 2 top");
                this.loadMore()
            }
        },
        /**Drop down refresh*/
        pullRefresh(e) {
            This. Triggerevent ('refresh '{refresh: true}) // pass refresh to the parent component as a parameter
        },
        /**Pull up to load more*/
        loadMore(e) {
            This. Triggerevent ('toload '{toload: true}) // passes toload to the parent component as a parameter
        }
    }
})

scroll.json

/**Set the component field to true to make this set of files a custom component*/
{
  "component": true
}

Use custom components

home.json

{
    "Navigationbartitletext": "title", // Title
    "Usingcomponents": {// registering components
        "tab-nav-roll": "../../components/tab-nav-roll/tab-nav-roll",
        "Scroll-y": ".. / components / scroll-y / scroll-y" // import components
    },
    "Enablepulldownrefresh": false, // use dropdown (false: not used, true: used)
    "Backgroundtextstyle": "dark" // drop-down mode
}

home.wxml

<scroll-y class="scroll-view" pull="{{pull}}" push="{{push}}" listLength="{{clueData.length}}" bindrefresh="refresh" bindtoload="toload">
    <view class="home-clue-list pb20 pr40 pl40" wx:for="{{clueData}}" wx:for-item="item" wx:for-index="key" wx:key="key">
        ... content
    </view>
</scroll-y>

home.js

Page({
    data: {
        clueData: [
            {createTime: '2019-11-12 16:33'},
            {createTime: '2019-11-12 14:55'}
        ],
        pull: {
            isLoading: false,
            loading: '../../image/common/pull_refresh.gif',
            Pulltext: 'loading'
        },
        push: {
            isLoading: false,
            loading: '../../image/common/pull_refresh.gif',
            Pulltext: '- pull up to load more -'
        },
    },
    refresh(e) {
        Console. Log ('refresh ', e)
        this.setData({
            'pull.isLoading': true,
            'pull.loading': '../../image/common/pull_refresh.gif',
            'pull. Pulltext': 'loading',
        })
        setTimeout(() => {
            this.setData({
                'pull.loading': '../../image/common/finish.png',
                'pull. Pulltext': 'refresh complete'
            })
        }, 4000)
        setTimeout(() => {
            this.setData({
                'pull.isLoading': false,
            })
            Console. Log ('+ + + + + + refresh completed + + + +')
        }, 6000)
    },
    toload(e) {
        Console.log ('load ', e),
        this.setData({
            'push.isLoading': true,
            'push. Pulltext': 'loading',
            'push.loading': '../../image/common/pull_refresh.gif',
        })
        if (this.data.clueData.length < 30) {
            setTimeout(() => {
                let data = this.data.clueData.concat([
                    {createTime: '2019-11-12 16:33'},
                    {createTime: '2019-11-12 14:55'},
                ])
                this.setData({
                    clueData: data,
                    'push.isLoading': false,
                    'push. Pulltext': '- pull up to load more -',
                    'push.loading': '../../image/common/finish.png',
                })
                Console. Log ('===== loading completed ========)
            }, 2000)
        }
    },
})

Other
Package components may be a little verbose, what good suggestions can be put forward. Thank you

Recommended Today

PHP Basics – String Array Operations

In our daily work, we often need to deal with some strings or arrays. Today, we have time to sort them out String operation <?php //String truncation $str = ‘Hello World!’ Substr ($STR, 0,5); // return ‘hello’ //Chinese string truncation $STR = ‘Hello, Shenzhen’; $result = mb_ Substr ($STR, 0,2); // Hello //First occurrence of […]