更新记录
1.0.1(2023-08-28)
修复外部滚动超出页面Bug
1.0.0(2023-08-28)
侧边栏导航,类似美团饿了么外卖商品列表效果,简单易改
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
3.4.15 |
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
使用方式: 1.在script中引用组件
import yhuNavigation from "@/components/yhu-navigation/yhu-navigation.vue";
export default {
components: {
yhuNavigation
},
2.在view中放入组件,在:scPassingArray之后加上自定义数组名(注意数组结构如下一致,如果不一致请过滤成这样)
<view>
<yhu-navigation :scPassingArray="UUScDataList" />
</view>
3.数据源
UUScDataList: [{/* UUScDataList为自定义事件名 */
barId: 0,
barTitle: "苹果",/* 左边导航栏标题 */
scContentData: [{
id: 1,
name: 'iphone15promax'
},/* 右边内容每项 */
...其他项
]
}]
示例中的数据:
data() {
return {
UUScDataList: [{
barId: 0,
barTitle: "苹果",
scContentData: [{
id: 1,
name: 'iphone15promax'
},
{
id: 2,
name: 'iphone15promax'
},
{
id: 3,
name: 'iphone15promax'
},
{
id: 4,
name: 'iphone15promax'
},
{
id: 5,
name: 'iphone15promax'
},
{
id: 6,
name: 'iphone15promax'
},
]
},
{
barId: 1,
barTitle: "三星",
scContentData: [{
id: 7,
name: 'iphone15promax'
},
{
id: 8,
name: 'iphone15promax'
},
{
id: 9,
name: 'iphone15promax'
},
{
id: 10,
name: 'iphone15promax'
},
{
id: 11,
name: 'iphone15promax'
},
{
id: 12,
name: 'iphone15promax'
},
]
},
{
barId: 2,
barTitle: "华为",
scContentData: [{
id: 13,
name: 'iphone15promax'
},
{
id: 14,
name: 'iphone15promax'
},
{
id: 15,
name: 'iphone15promax'
},
{
id: 16,
name: 'iphone15promax'
},
{
id: 17,
name: 'iphone15promax'
},
{
id: 18,
name: 'iphone15promax'
},
]
},
{
barId: 3,
barTitle: "小米",
scContentData: [{
id: 19,
name: 'iphone15promax'
},
{
id: 20,
name: 'iphone15promax'
},
{
id: 21,
name: 'iphone15promax'
},
{
id: 22,
name: 'iphone15promax'
},
{
id: 23,
name: 'iphone15promax'
},
{
id: 24,
name: 'iphone15promax'
},
]
},
{
barId: 4,
barTitle: "oppo",
scContentData: [{
id: 25,
name: 'iphone15promax'
},
{
id: 26,
name: 'iphone15promax'
},
{
id: 27,
name: 'iphone15promax'
},
{
id: 28,
name: 'iphone15promax'
},
{
id: 29,
name: 'iphone15promax'
},
{
id: 30,
name: 'iphone15promax'
},
]
},
{
barId: 5,
barTitle: "vivo",
scContentData: [{
id: 53,
name: 'iphone15promax'
},
{
id: 54,
name: 'iphone15promax'
},
{
id: 55,
name: 'iphone15promax'
},
{
id: 56,
name: 'iphone15promax'
},
{
id: 57,
name: 'iphone15promax'
},
{
id: 58,
name: 'iphone15promax'
},
{
id: 59,
name: 'iphone15promax'
},
{
id: 60,
name: 'iphone15promax'
},
{
id: 61,
name: 'iphone15promax'
},
{
id: 62,
name: 'iphone15promax'
},
{
id: 63,
name: 'iphone15promax'
},
{
id: 64,
name: 'iphone15promax'
},
{
id: 65,
name: 'iphone15promax'
},
{
id: 66,
name: 'iphone15promax'
},
{
id: 67,
name: 'iphone15promax'
},
{
id: 68,
name: 'iphone15promax'
},
{
id: 69,
name: 'iphone15promax'
},
{
id: 70,
name: 'iphone15promax'
},
{
id: 71,
name: 'iphone15promax'
},
{
id: 72,
name: 'iphone15promax'
},
{
id: 73,
name: 'iphone15promax'
},
{
id: 74,
name: 'iphone15promax'
},
{
id: 75,
name: 'iphone15promax'
},
{
id: 76,
name: 'iphone15promax'
},
{
id: 77,
name: 'iphone15promax(结束)'
},
]
},
],
}
}