更新记录

1.1.2（2021-06-28）

• 加载更多的显示隐藏
• 列表数据为空时的默认页面展示提示
• 数据展示增加index下标
• 数据展示增加item之外的数据对象 例如： 当前选择的导航数据、或者个人信息数据
• 参数说明的代码注释

1.1.1（2021-06-18）

适配了微信小程序，增加了上拉加载和下拉刷新

1.1.0（2021-06-18）

适配了微信小程序，增加了上拉加载和下拉刷新

平台兼容性

yhao-swiperNavBar

介绍

导航栏组件,导航自定义长度，页面数据自定义，左右切换，高度自由，上拉加载，下拉刷新

软件架构

• 自定义navBar,实际项目需求
• 列表可左右切换
• 微信小程序 H5 App
• 增加下拉刷新和触底加载
• 加载更多动画 uni-load-more

安装教程

1. 组件下载

使用说明

基本用法

在 template 中的使用

<view class="">
    <!--组件-->
    <swiperNavBar ref="navbarSwiper" :scrollIntoView="scrollIntoView" :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
        :currentList="currentList" :curNavbar="curNavbar" v-if="swiperTabList.length > 1"  :showLoadMore="showLoadMore" @change="CurrentTab"
        @swiperChange="SwiperChange" @refresherrefresh="handleRefresherrefresh" @scrolltolower="handleScrolltolower">
        <!-- 自己需要的订单样式 S -->
        <template v-slot:slotItem="{ item, curNavbar }">
            <view class="list-item">
                {{item}}
            </view>
        </template>
        <!-- 自己需要的订单样式 E -->
    </swiperNavBar>
    <!--组件-->
</view>

在 script 中的使用

    import swiperNavBar from "@/components/swiperNavBar/swiperNavBar.vue";
    export default {
        data() {
            return {
                 /* 轮播导航 S */
                scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素 轮播切换
                swiperTabList: [    //导航列表
                    { name: '导航1', alias: 0 }, 
                    { name: '导航2', alias: 1 }, 
                    { name: '导航3', alias: 2 }, 
                    { name: '导航4', alias: 3 }, 
                    { name: '导航5', alias: 4 }, 
                    { name: '导航6', alias: 5 }, 
                    { name: '导航7', alias: 6 }
                    ],
                swiperTabIdx: 0, // 轮播 切换
                curNavbar: {}, // 选中的导航数据  alias可以用来想后端请求的type
                loadMoreText: "加载中...",
                showLoadMore: 'more', // 加载更多动画

                currentList: [], // 当前需要展示的数据 是个数组
                 /* 轮播导航 E */
                pageNum: 1, // 分页的页码
                last_page: 1, // 总页码
            }
        },
        onLoad() {
            this.curNavbar = this.swiperTabList[this.swiperTabIdx] // 初始化选中项的数据参数
            this.getDataList()
        },
        components: {
            swiperNavBar
        },

        watch: {
            swiperTabIdx() {
                this.getDataList()
            }
        },
        methods: {
            // 请求后台接口，获取数据
            getDataList() {
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                })
                setTimeout(() => {
                    let arr = []
                    for (let i = this.swiperTabIdx + (this.pageNum * 10); i >= 0; i--) {
                        arr.push(i)
                    }
                    this.currentList = arr
                    this.last_page = this.swiperTabIdx
                    uni.hideLoading()
                    if(this.$refs.navbarSwiper) {
                        this.$refs.navbarSwiper.stopPullDownRefresh()
                    }
                    console.log('获取数据');
                }, 500)
                // console.log(this.currentList);
            },
            //navBar点击事件 
            CurrentTab: function(index, item) {
                this.swiperTabIdx = index;
                this.scrollIntoView = Math.max(0, index - 1);

            },
            //swiper滑动事件  
            SwiperChange: function(e) {
                this.swiperTabIdx = e.swiperTabIdx;
                this.scrollIntoView = e.scrollIntoView
            },
            // 下拉刷新
            handleRefresherrefresh() {
                // console.log('下拉刷新');
                this.pageNum = 1
                this.getDataList()
            },
            // 滚动到底部
            handleScrolltolower() {
                console.log('触底加载');
                this.showLoadMore = "loading"
                if (this.pageNum < this.last_page) {
                    this.pageNum++
                    this.getDataList();
                } else {
                    this.showLoadMore = "noMore!"
                }
            }
        }

    }

API

更新日志

1.1.2（2021-06-28）

• 加载更多的显示隐藏
• 列表数据为空时的默认页面展示提示
• 数据展示增加index下标
• 数据展示增加item之外的数据对象 例如： 当前选择的导航数据、或者个人信息数据
• 参数说明的代码注释

1.1.1（2021-06-18）

• 适配了微信小程序，增加了上拉加载和下拉刷新

1.1.0（2021-06-18）

• 适配了微信小程序，增加了上拉加载和下拉刷新

1.0.0（2021-06-16）

• 自定义navBar 列表可左右切换 测试通过了h5和安卓 下一版本会增加下拉刷新和触底加载