更新记录

1.1.2(2021-06-28)

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

1.1.1(2021-06-18)

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

查看更多

平台兼容性

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

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

参数 必传 类型 默认值 说明
scrollIntoView Number 0 设置哪个方向可滚动,则在哪个方向滚动到该元素
swiperTabIdx Array [] 导航列表
swiperTabList Number 0 导航对应列表下标
currentList Array [] 当前展示的列表
curNavbar Object {} 当前选中的导航的值
showLoadMore String more 加载更多的显示状态 按需必传
navBarBackground String #ffffff 导航的背景色
swiperCurrentSize String 26rpx 导航的字体大小
swiperColor String #333333 导航栏字体未选中前颜色
swiperCurrentColor String #1D63FF 选中当前导航栏字体颜色
navBarWidth String 20% 导航的宽度
currentSwiperHeight Number 88 当前导航的高度度
currentSwiperLineShow Boolean true 是否显示线条
currentSwiperLineActiveWidth String 60rpx 当前选中的导航栏线条的宽度
currentSwiperLineActiveHeight String 6rpx 当前选中的导航栏线条的高度度
currentSwiperLineActiveBg String #1D63FF 当前选中的导航栏线条颜色
currentSwiperLineAnimatie Boolean true 当前选中的导航栏线条过渡效果
swiperMarginTop String 0rpx 内容区距离navbar的margin-top
headBorderColor String 导航的底边线
swiperBoxHeight String calc(100vh - 88rpx - 88rpx) swiper可滚动高度

更新日志

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和安卓 下一版本会增加下拉刷新和触底加载

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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