LimeScrollX

• 仿京东带指示器横向滚动，兼容uniapp/uniappx

文档

scroll-x

安装

导入即可，首次导入可能需要重新编译

代码演示

基础使用

<l-scroll-x>
	<view class="grid">
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
		<view class="item">
			<image mode="widthFix" class="item-img" src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"></image>
			<text class="item-text">京东超市</text>
		</view>
	</view>
</l-scroll-x>

.grid {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	overflow: visible;
	flex-direction: row;
}
.item {
	// width: 80px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	padding: 10px;
	&-img {
		width: 40px;
	}
	&-text {
		padding: 5px;
		font-size: 12px;
		white-space: nowrap;
	}
}

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-scroll-x/compoents/lime-scroll-x 
<lime-scroll-x />

插件标签

• 默认 l-scroll-x 为 component
• 默认 lime-scroll-x 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
trackWidth	指示器条宽度	string	-
trackHeight	指示器条高度	string	-
trackColor	指示器条背景	string	-
barWidth	指示器条滑块宽度	string	-
barColor	指示器条滑块颜色	string	-
indicator	是否显示指示器	boolean	true

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

名称	默认值	描述
--l-scrollx-track-width:	24px	-
--l-scrollx-track-height:	4px	-
--l-scrollx-track-color:	rgba(0,0,0,.06)	-
--l-scrollx-bar-color:	#fa2c19	-
--l-scrollx-bar-width:	12px	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码