vscode开发小程序3

分类导航：

1.小技巧：添加编译模式：

　　每次启动的时候都是想要看的页面，那么可以这样子选:

　　1.点击普通编译->添加编译模式：

　　2.这样以后项目一打开就是分类页面了，比较方便。

2.点击

　　1.先定义一个新的接收所有数据的变量，然后右侧内容单独存放在一个数组中，当点击左侧不同的选项就显示数组里面对应的不同内容。

　　2.页面布局：使用伸缩盒子：

　　界面：

<view class="cates">
    <SearchInput></SearchInput>
    <view class="cates_container">
        <!-- 左侧菜单： -->
        <scroll-view scroll-y class="left_menu"></scroll-view>
        <!-- 右侧菜单： -->
        <scroll-view scroll-y class="right_content"></scroll-view>
    </view>
</view>

　　wxss:

page{
    height: 100%;
}
.cates{
    height: 100%;
    .cates_container{
        // 减去搜索框的高度：
        height: ~'calc(100vh 90rpx)';
        display: flex;
        .left_menu{
            flex: 2;
        }
        .right_content{
            flex: 5;
        }
    }
}

3.条件判断进行class渲染：

　　在wxss样式中设置某个样式 .active 后，要在页面根据条件判断是否需要加载：

　　在js中：

  /**
   * 页面的初始数据
   */
  data: {
      // 被点击的左侧的菜单;
      currentIndex:0
  },

4.页面缓存

　　在打开页面的时候看是否有缓存，没有的话便发送请求。如果有旧的数据且旧的数据没有过期就可以使用这些旧数据。

    //本地存储的数据格式：{time:Date.now(),data:[...]}
    //1.获取本地存储中的数据：key=ccates
    const Cates = wx.getStorageSync('cates');
    //2.判断本地是否有有效的旧数据：
    if(!Cates){
      //不存在，发送请求，并将数据写入到本地缓存中：
      this.getCates();
    }else{
      //3.存在且有效从本地缓存里面拿出数据：
      //过期时间：
      this.Cates = Cates.data;
      //构造左侧的大菜单数据：
      let leftMenuList = this.Cates.map(v => v.cat_name);
      //构造右侧的商品数据：
      let rightContent = this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightContent
      })

猜你喜欢