组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
color | String | red | 活动滚动条主题颜色名称 |
bgColor | String | grey-2 | 背景滚动条主题颜色名称 |
width | Number | 636 | 宽度,单位rpx |
height | Number | 300 | 高度,单位rpx |
showBar | Boolean | true | 是否显示滚动导航条 |
align | String | center | 底部导航对齐方式,可选:center/between |
🌹 事件
无
🌽 slot插槽
插槽名 | 数据 | 类型 | 描述 |
---|---|---|---|
default | - | - | 默认放置于滚动容器内内容 |
barllv3.0.77+ | - | - | 在底部导航条的左右,如果提供显示在左边。align=between时,内容会左右对齐。如果不提供时,导航条在左边对齐。 |
🥗 ref方法
scrollTo(pos:number),滚动到指定位置3.0.86+