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

最新推荐文章于 2024-03-20 18:08:33 发布

岁月如风丶逝

最新推荐文章于 2024-03-20 18:08:33 发布

阅读量2.4k

点赞数

分类专栏： weex 文章标签： weex 下拉刷新动画

本文链接：https://blog.csdn.net/u014739462/article/details/78317550

版权

weex 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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