更新记录

1.0.1(2023-03-30) 下载此版本

初次提交


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.1 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

props

参数 说明 类型 默认值
bgColor 修改背景颜色 String '#eeeeee'
safeBottom ios安全底部 Boolean true
refresh 是否开启下拉刷新 Boolean false
isRefresh 下拉刷新状态,true为刷新中,获取完数据后为false Boolean false
scrollStyle 滚动的样式 String 'height: 100%;'

slots

插槽名称 作用
common 普通展示的内容
scroll 需要滚动的内容,占比为flex:1
bottom 底部需要显示的内容

events

事件名称 作用
lower 滚动到底部触发
refresh 下拉刷新时触发

页面布局的组件

  • 集成了下拉刷新和触底事件以及是否加上ios安全底部样式
  • 开启下拉刷新需要开启refresh属性
  • 需要滚动的内容写入插槽为scroll中,不需要滚动的写入插槽common中,底部按钮或者底部自定义导航写入插槽bottom中即可

使用举例

<template>
        <w-layout 
                refresh
                :isRefresh="isRefresh"
                @refresh="refresh"
                @lower="lower"
                >
                    <template #common> 
                         <view class="title">
                             标题
                         </view>
                    </template>
                    <template #scroll>
                            <view class="" v-for="item in 100"> test{{item}}</view>
                    </template>
                    <template #bottom>
                            <view>test</view>
                    </template>
        </w-layout>
</template>

<script>
export default {
    data() {
        return {
            isRefresh: false,
            listData:[],
            searchParams: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
        }
    },
    methods:{
        async refresh() {
            this.searchParams.pageNum = 1
            this.isRefresh = true
            try {
                await this.getList()
                this.isRefresh = false
                this.$message.toast('刷新成功', 'suc')
            } catch (e) {
                //TODO handle the exception
            }
        },
        lower() {
            if (this.listData.length < this.searchParams.total) {
                this.searchParams.pageNum =
                    this.searchParams.pageNum + 1
                this.getList()
            } else {
                return
            }
        }
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问