vue 横向菜单滚动定位_React Native的横向滚动列表，实现标签tab定位功能

在美团或者大众点评上，我们经常看到那种竖形的滚动列表，左边可以定位右边的内容，右边可以定位左边标签tab。

可以帮我们很方便的实现这个功能。

可用属性

data：required， 数据源

tabStyle：optional tab的基本样式

selectedTabTextStyle：optional 选中之后文本的样式

selectedBarStyle：optional 选中之后移动的条状bar的样式

renderItem： required 渲染Item内容

renderDivider: optional 渲染分界面的divider

使用方法如下：

下载：npm install react-native-horizontal-category-list

引入组件： import { HorizontalSectionList } from "react-native-horizontal-category-list";

简单例子：

const data = [

{

label: "你好",

items: [

{ key: "name" },

{ key: "测试A1" },

{ key: "测试A2" },

{ key: "测试A3" },

{ key: "测试A4" }

]

},

{

label: "测试",

items: [

{ key: "nameB" },

{ key: "测试B" }

]

},

{

label: "的分",

items: [

{ key: "nameC" },

{ key: "测试C" }

]

},

{

label: "舒服",

items: [

{ key: "nameD" },

{ key: "nameD1" },

{ key: "nameD2" },

{ key: "nameD3" },

{ key: "nameD4" },

{ key: "测试D" }

]

}

];

data={data}

renderItem={(item) => {item.key}} />

效果图：

定制化样式：

data={data}

tabStyle={{ marginLeft: 2, borderWidth: 1, color: "gray", borderBottomWidth: 0, borderColor: "#9c9cA3", borderTopLeftRadius: 4, borderTopRightRadius: 4 }}

selectedTabTextStyle={{ color: "blue" }}

selectedBarStyle={{ width: 10, backgroundColor: "blue" }}

renderItem={(item) => {item.key}} />

效果：

本文地址：https://blog.csdn.net/A_love_B/article/details/107712127

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！