横向滚动 Scrollx v3.0.75+ ​

<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>