HorizontalScroll 横向滚动的视图容器 V1.9.8+

概述

HorizontalScroll 横向滚动的视图容器，主要用于菜单导航，热门商品区等场景。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiHorizontalScroll from "@/components/firstui/fui-horizontal-scroll/fui-horizontal-scroll.vue"
export default {
	components:{
		fuiHorizontalScroll
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用 / 热门商品展示

通过 background 属性设置滚动条背景色，scrollBarColor 属性设置滚动条颜色。

<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
	<view class="fui-list">
		<view class="fui-list--item" v-for="(item,index) in goodsList" :key="index">
			<fui-lazyload radius="16" marginBottom="20" :width="128" :height="128" :src="item.src"
				mode="aspectFill">
			</fui-lazyload>
			<fui-text :text="`￥${item.price}`" color="#FF2B2B" size="24"></fui-text>
		</view>
	</view>
</fui-horizontal-scroll>

1
2
3
4
5
6
7
8
9
10

data() {
	return {
		goodsList: [{
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
			price: '2800.00'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
			price: '48.00'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
			price: '29.90',
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
			price: '8.90'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
			price: '2800.00'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
			price: '48.00'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
			price: '29.90',
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
			price: '8.90'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
			price: '2800.00'
		}, {
			src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
			price: '48.00'
		}]
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.fui-list {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fui-list--item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-right: 24rpx;
}

.fui-list--item:last-child {
	margin-right: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Slots

名称	说明
default	容器内显示内容

# Props

属性名	类型	说明	默认值	平台差异说明
marginTop	Number, String	组件距离顶部内容距离，单位rpx	0	-
marginBottom	Number, String	组件距离底部内容距离，单位rpx	0	-
scroll	Boolean	是否显示自定义滚动条	true	-
scrollWidth	Number, String	自定义滚动条背景区域宽度，单位rpx	96	-
scrollBarWidth	Number, String	自定义滚动条宽度，单位rpx	32	-
scrollHeight	Number, String	自定义滚动条高度，单位rpx	8	-
scrollCap	String	自定义滚动条两端样式，可选值为 square（四方形）、round（圆形）	round	-
scrollBarColor	String	自定义滚动条颜色	#465CFF	非Nvue端默认可通过css变量（--fui-color-primary）改变颜色
background	String	自定义滚动条背景区域颜色	#EEEEEE	-
scrollGap	String, Number	自定义滚动条距离上方内容间距，单位rpx	24	-

温馨提示

如果组件在部分平台出现默认滚动条，可尝试在全局样式中引入以下样式：

/* #ifndef APP-NVUE */
::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	color: transparent !important;
	display: none;
}
/* #endif */

1
2
3
4
5
6
7
8

# Events

事件名	说明	回调参数
@scrolltoupper	滚动到左边，会触发 scrolltoupper 事件	-
@scrolltolower	滚动到右边，会触发 scrolltolower 事件	-

# Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
init	重新初始化组件信息，当内容复杂初始化有误时可等内容加载完后调用此方法纠正	-	-

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用。

开通会员 (opens new window)

← MovableView 可移动的视图容器 Section 标题栏 →