更新记录

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滚动监听的弹性指示滑块

• 更新了组件属性文档

平台兼容性

使用方法

• 复制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组件属性

下拉刷新组件属性见注释

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