更新记录

1.0.0(2021-12-26)

进一步美化完善。 修复一些bug。


平台兼容性

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

lxm-scrolllist-album是一个前端页面模板,一般用来做首页或其他页面。

框架主要内容:前端页面模板,搜索框吸顶边框调色+横滚菜单+单元格加载消息置顶标签+轮播图嵌入视频+相册头像+排版布局美化

使用的工具和技术:使用uView2的UI工具和技术,支持nvue页面。

scrolllist组件参数说明

ScrollList 横向滚动列表 
该组件一般用于同时展示多个商品、分类的场景,也可以完成左右滑动的列表。

#平台差异说明
App H5  微信小程序   支付宝小程序  百度小程序   头条小程序   QQ小程序
√   √   √   √   √   √   √
#基本使用
通过slot传入内容

<template>
    <u-scroll-list>
        <view v-for="(item, index) in list" :key="index">
            <image :src="item.thumb"></image>
        </view>
    </u-scroll-list>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
                }]
            }
        }
    }
</script>
#指示器的使用
indicator 用于控制指示器是否显示
indicatorWidth 用于控制指示器整体的宽度
indicatorBarWidth 用于控制指示器滑块的宽度
indicatorColor 指示器的颜色
indicatorActiveColor 滑块的颜色
indicatorStyle 指示器的位置/样式控制
<template>
    <u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
        <view v-for="(item, index) in list" :key="index">
            <image :src="item.thumb"></image>
        </view>
    </u-scroll-list>
</template>

<script>
    export default {
        data() {
            return {
                indicator: true,
                list: [{
                    thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
                }]
            }
        }
    }
</script>
#兼容性与性能
此组件是在nvue中引入bindingx,此库类似于微信小程序wxs,目的是让js运行在视图层,减少视图层和逻辑层的通信折损,在nvue中会有更好的体验。
此组件是在APP-VUE、H5、小程序中使用的是wxs。
其他平台则使用js完成。
当滑动到最左边/最右边时,uView提供了事件left和right可供调用,用于对列表滑动到端点处的业务实现。

<template>
    <u-scroll-list @right="right" @left="left">
        <view class="scroll-list" style="flex-direction: row;">
            <view
                    class="scroll-list__goods-item"
                    v-for="(item, index) in list"
                    :key="index"
                    :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
            >
                <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
                <text class="scroll-list__goods-item__text">¥{{ item.price }}</text>
            </view>
            <view class="scroll-list__show-more">
                <text class="scroll-list__show-more__text">查看更多</text>
                <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
            </view>
        </view>
    </u-scroll-list>
</template>
<script>
export default {
    data() {
        return {
            list: [{
                price: '230.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }, {
                price: '74.1',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            }, {
                price: '8457',
                thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
            }, {
                price: '1442',
                thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            }, {
                price: '541',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            }, {
                price: '234',
                thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            }, {
                price: '562',
                thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            }, {
                price: '251.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }]
        }
    },
    methods: {
        left() {
            console.log('left');
        },
        right() {
            console.log('right');
        }
    }
}
</script>

<style lang="scss">
.scroll-list {
    @include flex(column);

    &__goods-item {
        margin-right: 20px;

        &__image {
            width: 60px;
            height: 60px;
            border-radius: 4px;
        }

        &__text {
            color: #f56c6c;
            text-align: center;
            font-size: 12px;
            margin-top: 5px;
        }
    }

    &__show-more {
        background-color: #fff0f0;
        border-radius: 3px;
        padding: 3px 6px;
        @include flex(column);
        align-items: center;

        &__text {
            font-size: 12px;
            width: 12px;
            color: #f56c6c;
            line-height: 16px;
        }
    }
}
</style>
#此页面源代码地址
页面源码地址

github github
github gitee

#API
#Props
参数  说明  类型  默认值 可选值
indicatorWidth  指示器的整体宽度    String | Number 50  -
indicatorBarWidth   滑块的宽度   String | Number 20  -
indicator   是否显示面板指示器   Boolean true    false
indicatorColor  指示器非激活颜色    String  #f2f2f2 -
indicatorActiveColor    指示器滑块颜色 String  #3c9cff -
indicatorStyle  指示器样式,可通过bottom,left,right进行定位  String | Object -   -
#Events
事件名 说明  回调参数
left    滑动到左边时触发    -
right   滑动到右边时触发    -

传奇开心果模板lxm-scrolllist-albumV1.0.0传奇开心果出品2021.12.26

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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