CommunityApp/comps/scroll_menu.vue

<template>
	<view class="scroll_memu">
	  <!-- <scroll-view scroll-x="true" class="scroll">
	    <view class="memu_list">
	      <view v-if="tabList.length>0" class="item" v-for="(item,idx) in tabList" :key="idx" hover-class="item-hover" @tap="jumpGoodsDes(item)">{{item.keyword}}</view>
	    </view>
	  </scroll-view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[]
			};
		},
		created() {
			// this.getProductCategorys();
			this.getExporeHotWord()
		},
		methods:{
			async getExporeHotWord(){
				let resp = await this.$api.getExporeHotWord({
					type:2, // type:0:默认, 1:商品搜索, 2:商品详情
					num: '10'
				})
				this.tabList = resp;
			},
			async getProductCategorys() {
			  let resp = await this.$api.getProductCategorys();
			  if (resp) {
			    let plen = resp.length
			    if (plen <= 2 && plen > 0) {
			      if (resp[0] && resp[0].childrens && resp[0].childrens.children) {
			        let list = resp[0].childrens.children
			        this.tabList = Array.isArray(list) ? list : []
			      }
			    } else if (plen > 2) {
			      this.tabList = resp;
			    } else {
			      this.tabList = [];
			    }
			  } else {
			    this.tabList = [];
			  }
			  return resp
			},
			jumpGoodsDes(item) {
			  uni.navigateTo({
			    url: "/pagesM/pages/goods_des?id=" + item.extendData
			  })
			},
			// 跳转搜索
			jumpSearch(item) {
			  if (!item) {
			    uni.navigateTo({
			      url: "/pagesM/pages/search"
			    })
			  } else {
			    let params = {
			      keyword: item.name,
			      productCategoryId: item.id
			    }
			    uni.navigateTo({
			      url: "/pagesM/pages/search?" + this.$util.serialize(params)
			    })
			  }
			},
		}
	}
</script>

<style lang="scss">
	.scroll_memu {
	  // height: 90upx;
	  margin: 20upx 0 20upx 0;
	  width: 100%;
	  .scroll {
	    white-space: nowrap;
	    width: 100%;
	    height: 100%;
	    .memu_list {
	      height: 100%;
	      display: flex;
	      flex-direction: row;
	      align-items: center;
	      font-size: 20upx;
	      color: #fff;
	      .item {
			  // background-image: url(http://139.9.103.171:1888/img/image/home_yezi.png);
			  // background-size: auto 100% ;
			  // background-position-x: center;
			  // background-repeat: no-repeat;
				background: rgba($color: #FFFFFF, $alpha: 0.3);
				border-radius: 25px;
				height: 40upx;
				line-height: 40upx;
				padding: 0 20upx;
				margin-right: 20upx;
				text-align: center;
	      }
	
	      .item-hover {
	        opacity: 0.5;
	      }
	
	      .space {
	        padding-right: 30rpx;
	      }
	    }
	  }
	}
</style>