【小程序系列】[02]优购项目 分类 搜索

适应不同型号手机动态绑定可视高度

<scroll-view scroll-y="true"   class="left-scroll-view" :style="{height:wh+'px' }">
		  <block v-for="(item,index) in cateList" :key="index">
        <view :class="['left-scroll-view-item' ,active == index ? 'active' :'']" @click="activeClick(index)">{{item.cat_name}}</view>
      </block>
		</scroll-view>

	data() {
			return {
				wh:0,
        cateList:[],
        active:0
			};
		},



 onLoad() {
     const sysInfo = uni.getSystemInfoSync()
          // 为 wh 窗口可用高度动态赋值
    this.wh = sysInfo.windowHeight
      this.getcateList()
    },

给添加侧边红色边框

.left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

三种class写法

获取2级菜单数据

 async  getcateList(){
      const {data:res} = await uni.$http.get('/api/public/v1/categories')
      if(res.meta.status !== 200) return uni.$showMsg()
      this.cateList = res.message
      
      this.cateLevel2 = res.message[0].children
    },
    activeClick(index){
      this.active = index
      this.cateLevel2 = this.cateList[index].children
    }

切换分类滚动条重置到最顶部

<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop"></scroll-view>


data(){
	 return {
		scrollTop:0
	}
}
 activeClick(index){

      this.scrollTop = this.scrollTop === 0 ? 1 : 0
    }

商品列表详情跳转设置

<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
  <image :src="item3.cat_icon"></image>
  <text>{{item3.cat_name}}</text>
</view>

// 点击三级分类项跳转到商品列表页面
gotoGoodsList(item3) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
  })
}

创建搜索组件之前,需要创建components
然后创建my-search组件

然后在需要的地方放入组件

home顶部搜索栏固定效果外面一定要套一个view盒子

cate分类不需要套盒子

.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}

搜索组件@input="input"

 <!-- 使用 uni-ui 提供的搜索组件 -->
	  <uni-search-bar class="search-bar" @input="input" :radius="100" cancelButton="none"></uni-search-bar>

	export default {
		data() {
			return {
				time:null,
        		kw:''
			};
		},
    methods:{
      input(e){
        clearTimeout(this.time)
       this.time =  setTimeout(()=>{
          this.kw = e.value
            console.log(this.kw)
        },500)
      }
    }
	}

搜索建议 发送请求获取数据

<!-- 搜索建议 -->
    <view class="sugg-list">
      <view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>

async getSearchList() {
        // 判断搜索关键词是否为空
        if (this.kw.length === 0) {
          this.searchResults = []
          return
        }
        const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.kw
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResults = res.message
      },

搜索建议跳转到搜素结果详情页

@click="gotoDetail(item.goods_id)"

 gotoDetail(goods_id){
        uni.navigateTo({
          url:"/subpkg/goods_detail/goods_detail?good_id=" + goods_id
        })
      }