更新记录

1.0.1（2023-03-30）

初次提交

平台兼容性

props

slots

events

页面布局的组件

• 集成了下拉刷新和触底事件以及是否加上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
            }
        }
    }
}