更新记录

1.20(2020-03-27)

  • 修复了非ios h5端拿不到节点信息的问题
  • 优化了部分代码
  • 调整了组件的写法(更简便)
  • 下拉刷新删除了触顶判断(多余)
  • 解决了部分机型渲染慢而得不到节点信息的问题

注意,经过仔细排查小程序端,和部分安卓机型因为slot嵌套存在bug(官方未解决),所以不支持已组件的形式创建

平台仅支持app和h5端 ,如果出现页面正常启动,但无法左右滑动及显示你的自定义页面,就是存在slot嵌套bug

解决办法: 直接把jui-list组件改为非组件方式应用再你的页面里即可

1.11(2020-03-25)

  • 修正了文档错误的地方

1.10(2020-03-25)

此组件适用于快速搭建左右滑动的导航栏的框架

平台仅支持app和h5

页面采用swiper+原生滚动的解决方案 导航栏采用srocll-view 下拉刷新为wxs及基于swiper滚动监听的弹性指示滑块

  • 更新了组件属性文档
查看更多

平台兼容性

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

使用方法

  • 复制js部分
// 判断页面是否触顶 ,0触顶,1没有触顶
    var top=0
    import juiList  from '@/components/jui-list/jui-list.vue';
    export default {
        components: {juiList},
        // 监听页面是否触顶
        onPageScroll(e) {
            if(e.scrollTop<1){
                top=0
                uni.$emit("reMsg",0)
            }else{
                if(top!=1){
                    top=1
                    uni.$emit("reMsg",1)
                }               
            }
        },
        onReady() { 
            // 让swiper高度自适应
            this.getSwiper(0)
        },
        data() {
            return {
                listHeight:0,
                list:["首页","小首页","呜呜呜呜","导航nav","导航nav","导航nav","导航nav"],
                // 俩个list 长度要一致
                swList:[1,2,3,4,5,6,7]
            }
        },
        methods: {
            // 改变nav时触发 e为当前nav的索引
            navChange(e){               
                this.getSwiper(e)
            },
            // 自适应swiper高度
            getSwiper(id){
                setTimeout(()=>{
                    var query=uni.createSelectorQuery()
                    query.select('#item'+id).boundingClientRect(data => {
                        this.listHeight=data.height

                    }).exec();
                },50)
            },
            // 刷新
            relist(){
                // 这里写刷新业务
                setTimeout(()=>{
                    // 收回下拉刷新
                    uni.$emit("reMsg",-1)
                },2000)
            }
        }
    }
  • view层
 <!--下拉刷新相关-> widthImg刷新图宽 heightRh下拉刷新整体高度(因对应导航栏高度) msgShow(是否显示文字) image(图片路径) -->

          <!--jui-list相关 swLine 滑动线条长度  SrPadding 导航栏整体padding  SrHeight 导航栏高
           navHoverClass选中的导航文字样式  navClass未选中导航文字样式  dhList导航文字列表-->
        <jui-list @relist="relist" :dhList="list" :msgShow="false" :listHeight="listHeight" @navChange="navChange"  >
            <template slot="list">

                <swiper-item v-for="(x,i) in swList" :key="i" >
                        <!-- 你的view -->             
                </swiper-item>

            </template>
        </jui-list>

jui-list组件属性

属性名 描述 类型 默认值
dhTop 导航栏上padding (px) int 20
navHoverClass 导航栏文字选中样式 String my-title
navClass 导航栏文字未选中样式 String
listHeight 列表高度(会动态赋值,只要当高度出现异常才需要修改此属性) -
SrHeight 导航栏高 String 80rpx
SrPadding 导航栏左右边距 (px) int 20
swLine 滑块宽度 (px) int 10
dhList 导航栏列表(此属性必填,且长度要与你的list一致) Array -

下拉刷新组件属性见注释

平台仅支持App 和H5 ----->小程序要自己做一些修改

隐私、权限声明

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

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

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

许可协议

MIT协议

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