Skip to content
On this page

组件库文档 tmui.design

横向滚动 Scrollx v3.0.75+

横向滚动,应用于菜单图标,内容需要横向滚动的场景,注意:我已经兼容了所有平台,如果你需要使用原生的scroll-view横向滚动,需要自行兼容。


🌶️ 横向滚动 Scrollx 示例效果

查看模拟效果
示例代码
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="32" label="横向滚动"></tm-text>
			<tm-divider></tm-divider>
			<tm-text label="抹平了平台差异,适用于希望内容横向滚动的场景."></tm-text>
			<tm-text label="使用时一定要注意scrollx的宽度和内部的宽度一定要设置,否则会失效,同时也要注意高度的设置,留出底部导航条的间距."></tm-text>
		</tm-sheet>
		<tm-sheet :padding="[0, 0]" _class="overflow">
			<tm-scrollx :width="686" :height="300">
				<tm-grid :col="7" :width="1340">
					<tm-grid-item v-for="(item, index) in list" :key="index" :height="140" :count="item.count">
						<tm-image :width="110" :height="79" :src="item.path"></tm-image>
						<view style="white-space: normal">
							<tm-text _class="text-overflow-1" :font-size="24" :label="item.title"></tm-text>
						</view>
					</tm-grid-item>
				</tm-grid>
			</tm-scrollx>
		</tm-sheet>
		<tm-sheet :padding="[0, 0]" _class="overflow">
			<tm-scrollx align="between" :width="686" :height="300">
				<template v-slot:barll>
					<tm-text _class="pl-24" color="primary" :font-size="24" label="新闻关键词,营销信息"></tm-text>
				</template>
				<tm-grid :col="7" :width="1340">
					<tm-grid-item v-for="(item, index) in list" :key="index" :height="140" :count="item.count">
						<tm-image :width="110" :height="79" :src="item.path"></tm-image>
						<view style="white-space: normal">
							<tm-text _class="text-overflow-1" :font-size="24" :label="item.title"></tm-text>
						</view>
					</tm-grid-item>
				</tm-grid>
			</tm-scrollx>
		</tm-sheet>
	</tm-app>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import tmApp from '../../tmui/components/tm-app/tm-app.vue'
import tmScrollx from '../../tmui/components/tm-scrollx/tm-scrollx.vue'
import tmGrid from '../../tmui/components/tm-grid/tm-grid.vue'
import tmGridItem from '../../tmui/components/tm-grid-item/tm-grid-item.vue'
import tmIcon from '../../tmui/components/tm-icon/tm-icon.vue'
import tmImage from '../../tmui/components/tm-image/tm-image.vue'
import tmText from '../../tmui/components/tm-text/tm-text.vue'
import tmDivider from '../../tmui/components/tm-divider/tm-divider.vue'
import tmSheet from '../../tmui/components/tm-sheet/tm-sheet.vue'
const list = ref([
	{ path: 'https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg', title: '天猫新品', count: '热销' },
	{
		path: 'https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg',
		title: '今日爆款今日爆款今日爆款',
		count: 0
	},
	{ path: 'https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg', title: '天猫国际', count: 0 },
	{ path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg', title: '飞猪旅行', count: 0 },
	{ path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg', title: '天猫超市', count: 0 },
	{
		path: 'https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp',
		title: '冬奥公益',
		count: 0
	},
	{ path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg', title: '飞猪旅行', count: 99 },
	{ path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg', title: '天猫超市', count: 0 },
	{
		path: 'https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp',
		title: '冬奥公益',
		count: 0
	},
	{ path: 'https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg', title: '天猫新品', count: 6 },
	{ path: 'https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg', title: '今日爆款', count: 0 },
	{ path: 'https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg', title: '天猫国际', count: 0 },
	{ path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg', title: '飞猪旅行', count: 0 },
	{ path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg', title: '天猫超市', count: 0 }
])
</script>

<style></style>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
colorStringred活动滚动条主题颜色名称
bgColorStringgrey-2背景滚动条主题颜色名称
widthNumber636宽度,单位rpx
heightNumber300高度,单位rpx
showBarBooleantrue是否显示滚动导航条
alignStringcenter底部导航对齐方式,可选:center/between

🌹 事件

🌽 slot插槽

插槽名数据类型描述
default--默认放置于滚动容器内内容
barllv3.0.77+--在底部导航条的左右,如果提供显示在左边。align=between时,内容会左右对齐。如果不提供时,导航条在左边对齐。

🥗 ref方法

scrollTo(pos:number),滚动到指定位置3.0.86+

💏 文档贡献