品牌tabs

app.js

@@ -3,13 +3,7 @@ import {
 } from './utils/Api';
 
 App({
-	onLaunch() {
-		wx.getSystemInfo({
-			success (res) {
-				console.log(res)
-			}
-		})
-	},
+	onLaunch() {},
 	globalData: {
 		http: new ApiModel(), //接口文件
 	}

packageA/market/index.js

@@ -2,6 +2,7 @@ const _Http = getApp().globalData.http;
 
 Page({
 	data: {
+		brandList: [], //品牌列表
 		loading: true,
 		"content": {
 			"brandids": [1],
@@ -13,6 +14,7 @@ Page({
 			}
 		},
 	},
+
 	getList(init) {
 		if (init.detail != undefined) init = init.detail;
 		let content = this.data.content;
@@ -26,74 +28,46 @@ Page({
 			console.log("商品列表", res)
 		})
 	},
-
-	onInput(e) {
-		this.setData({
-			"content.where.condition": e.detail.value
-		})
-	},
-	onClear() {
-		this.setData({
-			"content.where.condition": ""
-		})
-	},
-
 	onLoad(options) {
 		setTimeout(() => {
 			this.setData({
 				loading: false
 			})
 		}, 1000)
+		this.getBrand()
+	},
+	/* 获取品牌 */
+	getBrand() {
+		_Http.basic({
+			"id": 20220924163702,
+			"content": {
+				"pageSize": 999,
+			}
+		}).then(res => {
+			console.log("查询品牌", res)
+			this.setData({
+				brandList: res.data
+			})
+		})
 	},
 
 
+
 	onReady() {
 		this.setListHeight()
 	},
+	onInput(e) {
+		this.setData({
+			"content.where.condition": e.detail.value
+		})
+	},
+	onClear() {
+		this.setData({
+			"content.where.condition": ""
+		})
+	},
 	/* 设置页面高度 */
 	setListHeight() {
 		this.selectComponent("#ListBox").setHeight(".head", this);
 	},
-
-	/**
-	 * 生命周期函数--监听页面显示
-	 */
-	onShow() {
-
-	},
-
-	/**
-	 * 生命周期函数--监听页面隐藏
-	 */
-	onHide() {
-
-	},
-
-	/**
-	 * 生命周期函数--监听页面卸载
-	 */
-	onUnload() {
-
-	},
-
-	/**
-	 * 页面相关事件处理函数--监听用户下拉动作
-	 */
-	onPullDownRefresh() {
-
-	},
-
-	/**
-	 * 页面上拉触底事件的处理函数
-	 */
-	onReachBottom() {
-
-	},
-
-	/**
-	 * 用户点击右上角分享
-	 */
-	onShareAppMessage() {
-
-	}
 })

packageA/market/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "List":"./modules/list/index"
+    "List": "./modules/list/index",
+    "Tabs": "./modules/tabs/index"
   }
 }

packageA/market/index.scss

@@ -48,6 +48,23 @@
 	}
 }
 
+.brand-box {
+	margin-left: 30rpx;
+	padding-bottom: 20rpx;
+
+	.brand-tab-class {
+		height: 52rpx;
+		line-height: 52rpx;
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.brand-active-class {
+		border-radius: 26rpx;
+		background-color: #FAFAFA;
+	}
+}
+
 
 .corner-mark {
 	position: absolute;

packageA/market/index.wxml

@@ -10,6 +10,8 @@
 	<navigator url="#" class="but"><text class="iconfont icon-shengxu"></text>排序</navigator>
 	<navigator url="#" class="but"><text class="iconfont icon-shaixuan"></text>筛选</navigator>
 </view>
+<!-- 品牌列表 -->
+<Tabs list="{{brandList}}" box-class='brand-box' tab-class='brand-tab-class' active-class='brand-active-class' />
 
 <Yl_FloatingButton useSlot>
 	<view>

packageA/market/modules/tabs/index.js

@@ -0,0 +1,49 @@
+Component({
+  properties: {
+    list: Array,
+    name: {
+      type: String,
+      value: "brandname"
+    },
+    active: {
+      type: String,
+      value: 0
+    },
+    onChenge: Function
+  },
+  externalClasses: [
+    "box-class", "tab-class", "active-class"
+  ],
+  data: {
+    scrollLeft: 0,
+  },
+  methods: {
+    onClick(e) {
+      const {
+        index,
+        item
+      } = e.currentTarget.dataset;
+      if (this.data.active != index) {
+        this.setData({
+          active: index
+        });
+        this.triggerEvent("onChenge", {
+          item,
+          index
+        })
+        this.setActive();
+      }
+    },
+
+    setActive() {
+      const that = this,
+        active = this.data.active,
+        query = wx.createSelectorQuery().in(this)
+      query.select('#active' + active).boundingClientRect(function (res) {
+        that.setData({
+          scrollLeft: res.right - res.width
+        })
+      }).exec();
+    },
+  }
+})

packageA/market/modules/tabs/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

packageA/market/modules/tabs/index.scss

@@ -0,0 +1,16 @@
+.scroll-box {
+	background-color: #fff;
+	.box {
+		display: flex;
+		min-width: 100vw;
+
+		.item {
+			flex-shrink: 0;
+			padding: 0 20rpx;
+		}
+
+		.active {
+			color: var(--assist);
+		}
+	}
+}

packageA/market/modules/tabs/index.wxml

@@ -0,0 +1,7 @@
+<scroll-view class="scroll-box" scroll-x scroll-left='{{scrollLeft}}' scroll-with-animation enable-passive>
+	<view class="box box-class">
+		<view wx:for="{{list}}" class="item tab-class {{active==index?'active active-class':''}}" id='{{"active"+index}}' wx:key="index" data-item="{{item}}" data-index="{{index}}" bindtap="onClick">
+			{{item[name]}}
+		</view>
+	</view>
+</scroll-view>

project.private.config.json

@@ -29,6 +29,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "列表",
+          "pathName": "packageA/market/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }