better-scroll使用的简易demo

来吧，相约98

于 2019-07-05 17:34:39 发布

阅读量888

点赞数

分类专栏： vue组件文章标签： better-sroll 上拉加载

本文链接：https://blog.youkuaiyun.com/weixin_44294658/article/details/94742716

版权

本文介绍如何在移动端利用better-scroll实现上拉刷新和下拉加载，特别适合混合App开发。提供了一个基础demo，虽然上拉加载功能未在文中展示，但建议参考better-scroll官方文档进行扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人感觉better-scroll用于移动的端的上拉加载和下拉刷新体验真的非常流畅，用于混合App开发非常合适。废话不多说，直接上demo。

<template>
<template>
    <div class="wrapper" ref="wrapper">
        <div>
            <slot></slot>
            <div class="loaddingText" v-if="isLoading">{
  { bottomPullText }}</div>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll"

export default {
    props: {
        // 显示文字
        bottomPullText: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            wrapScroll: '', //滚动容器对象
            isLoading: false,
            // 记录起始位置，防止上拉加载后回滚到顶；
            satrY: 0
        }
    },
    methods: {
        // 上拉加载
        uploadMore() {
            this.$emit('bottom-method')
            this.refresh()
        }, 
        //

最低0.47元/天解锁文章