uni-app开发小程序,笔记记录3 分类开发

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购 笔记地址

知识点
1 scroll-view 必须设置 height 属性

:style="{height:scrollHeight - 50  + 'px'}"  // :开头动态设置 参数 并用 { } 包裹

onLoad() {
      this.getCateList();
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight // 可用屏幕高度
      this.scrollHeight = uni.getSystemInfoSync().windowHeight 
},

brand	string	设备品牌	1.5.0
model	string	设备型号。新机型刚推出一段时间会显示unknown，微信会尽快进行适配。	
pixelRatio	number	设备像素比	
screenWidth	number	屏幕宽度，单位px	1.1.0
screenHeight	number	屏幕高度，单位px	1.1.0
windowWidth	number	可使用窗口宽度，单位px	
windowHeight	number	可使用窗口高度，单位px	
statusBarHeight	number	状态栏的高度，单位px	1.9.0
language	string	微信设置的语言

2 点击事件

@click="leftItemClick(i)"

3 class 动态添加类样式 [ ] + ‘’

:class="['left-box' , i == active ? 'active':'']"

4 跳转

uni.navigateTo({
   url: '/subpkg/goods_list/goods_list?cid=' + item2.cat_id
})

5 选中与未选中效果

	.left-box {  

        xxxxx: xxxx;
        
        &.active {
        
           xxxxx: xxxx;
           
          &::before {
          
             xxxxx: xxxx;
          }
          
        }
	}

	.left-box {

        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: black;
        background-color: #efefef;

        &.active {
          color: #C00000;
          background-color: #ffffff;
          position: relative;

          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 40rpx;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 25%;
    
          }
        }
      }
    }

全部代码

<template>
  <view>
    
    <my-serach bgcolor="#0000C0" radius="25" @click="searchBox"></my-serach>
    <view class="scroll-box">

      <scroll-view scroll-y="true" class="scroll-left" :style="{height:scrollHeight - 50  + 'px'}">
        <!-- ,i == active ? 'active':'' -->
        <view :class="['left-box' , i == active ? 'active':'']" v-for="(item , i) in cateList" :key="i"
          @click="leftItemClick(i)">
          <view class="left-box-title">
            {{item.cat_name}}
          </view>
        </view>
      </scroll-view>

      <scroll-view scroll-y="true" class="scroll-right" :style="{height:scrollHeight - 50 + 'px'}" :scroll-top="scrollto">

        <view class="right-box" v-for="(item,i) in childList" :key="i">
          <view class="right-box-top-biaoti">
            // {{item.cat_name}} //
          </view>
          <view class="right-box-bottom">

            <view class="right-box-bottom-item" v-for="(item2,i2) in item.children" :key="i2"
              @click="rightItemClcik(item2)">

              <image class="right-box-bottom-item-image"
                src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></image>
              <view> {{item2.cat_name}}
              </view>
            </view>


          </view>
        </view>

      </scroll-view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [],
        scrollHeight: 0,
        active: 0,
        childList: [],
        scrollto: 0

      };
    },
    onLoad() {
      this.getCateList();
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight // 可用屏幕高度
      this.scrollHeight = uni.getSystemInfoSync().windowHeight 
    },
    methods: {
      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.childList = this.cateList[0].children
      },
      leftItemClick(i) {
        this.scrollto = this.scrollto === 0 ? 1 : 0
        this.active = i
        this.childList = this.cateList[i].children
        
      },
      rightItemClcik(item2) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item2.cat_id
        })
      },
      searchBox(){
          // console.log("searchBox")
          uni.navigateTo({
            url:'/subpkg/search/search'
          })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-box {
    display: flex;

    .scroll-right {}

    .scroll-left {
      width: 120px;

      .left-box {

        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: black;
        background-color: #efefef;

        &.active {
          color: #C00000;
          background-color: #ffffff;
          position: relative;

          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 40rpx;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 25%;
    
          }
        }
        
      }
    }

    .right-box {
      display: flex;
      flex-wrap: wrap;


      .right-box-top-biaoti {
        height: 60rpx;
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 12px;
        font-weight: bold;

      }

      .right-box-bottom {
        margin-left: 20rpx;
        margin-right: 20rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }


      .right-box-bottom-item {
        width: 33.33%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
        font-size: 10px;

        .right-box-bottom-item-image {
          width: 126rpx;
          height: 100rpx;
          margin-bottom: 10rpx;
        }
        
       
      }

    }



  }
</style>