weex学习之路(二)---组件封装（2）--下拉刷新和上拉加载

来源：互联网发布：阳江网络问政平台官网编辑：程序博客网时间：2024/06/01 07:14

weex的list和scroller组件本身就支持下拉刷新和上拉加载(web端是有问题，下拉刷新用不了)，不过在用下拉刷新的时候遇到一些坑(开发原生的同事说客户端对git的支持不是很友好，所以就自己写了一个简单的加载动画切换)，代码具体如下:

       <!--下拉刷新列表视图-->     <template><div :style="styleRefreshStyle">    <list style="flex: 1;"          :loadmoreoffset="loadmoreoffset"          @scroll="viewScroll"          @loadmore="loadmore">        <refresh class="flex_row" :style="refreshContainerStyle"                 @refresh="viewRefresh"                 @pullingdown="viewOnPullingDown"                 :display="showRefresh ? 'show' : 'hide'">            <div class="flex_row flex_v_center" :style="refreshContentStyle">                <image :src="images[currentAnimationFrame]" :style="imageStyle"></image>                <div v-if="refreshTitle.length>0 && pullDownTipText.length>0 ">                    <text class="loading_text" v-if="refreshTitle.length>0">{{refreshTitle}}</text>                    <text class="loading_text" v-if="tipStatus===false">{{pullDownTipText}}</text>                    <text class="loading_text" v-if="tipStatus">{{refreshTipText}}</text>                </div>            </div>        </refresh>        <slot></slot>    </list></div>   </template>    <script>       import {timer} from "../utils/ExportWeexModel";    import weexUtils from "../utils/WeexUtils";     export default {    props: {        imageStyle: {            default: {                width: "224px",                height: "126px"            }        },        refreshContainerStyle: {            default: {                width: "750px"            }        },        refreshContentStyle: {            default: {                paddingLeft: "100px"            }        },        images: { default: [                           weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_0.png", weex),            weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_1.png", weex),            weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_2.png", weex),            weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_3.png", weex),            weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_4.png", weex),            weexUtils.getResourcesURL("images/animation/pull_to_refresh_people_5.png", weex)        ]},  //刷新动画图片列表        refreshTitle: {default: ""},        pullDownTipText: {default: "松开后刷新"},        refreshTipText: {default: "正在加载中"},        frameTimes: {default: 130},        loadmoreoffset: {default: 120}    },    data() {        let web = weex.config.env.platform.toLowerCase() === "web";        let styleRefreshStyle={            flex:1        };        if(web){            styleRefreshStyle.height="100%";        }        return {            showRefresh: false,            tipStatus: false,            animationFrameHandler: null,            currentAnimationFrame: 0, //当前下拉刷新动画的帧            styleRefreshStyle        }    },    methods: {        /**         * 下拉刷新动画帧控制         **/        viewRefreshAnimation() {            console.log("开始执行动画刷新!--> " + this.currentAnimationFrame);            timer.setTimeout(this.animationFrameHandler, this.frameTimes);        },        viewOnPullingDown() {            //开始动画        },        viewRefresh() {            this.showRefresh = true;            this.tipStatus = true;            this.viewRefreshAnimation();            this.$emit("refreshPage", () => {                this.refreshEnd();            });        },        refreshEnd(){            timer.setTimeout(() => {                //结束动画                //this.viewRefreshAnimation();                this.showRefresh = false;                timer.setTimeout(() => {                    this.tipStatus = false;                }, 200);            }, 500);        },        loadmore() {            this.$emit("loadmore");        },        viewScroll(event) {            //页面滚动时调用的方法            this.$emit("pageScroller", event);        }    },    created() {        const imagesLength = this.images.length;        this.animationFrameHandler = () => {            console.log("this.currentAnimationFrame-->  " + this.currentAnimationFrame);            if (this.currentAnimationFrame < imagesLength) {                this.currentAnimationFrame++;            } else {                this.currentAnimationFrame = 0;            }            if (this.showRefresh) {                this.viewRefreshAnimation();            }        };    }}  </script>  <style scoped>.flex_v_center {    align-items: center;}.flex_row {    flex-direction: row;}.loading_text {    font-size: 30px;    color: #9c9c9c;    text-align: center;    padding-left: 10px;}

主要使用timer.setTimeout来切换动画图片（还有一个scroller的实现版本和这个基本相同，就是把list换成scroller）

完整源码–> github

阅读全文

0 0