优选商城的项目讲解

项目的分析步骤

1.首先我们创建底部tab的路径，小程序已经给我们提供了设置tab栏的内置组件
2.让后在进行个个页面的渲染（具体的逻辑慢慢来说）
3.首先我们要把prmins进行一个分装，为了后续页面的使用

首页

1.首先我们要进行页面的请求数据
2.然后通过请求过来的数据进行渲染页面
3.我是将首页分为四大模块进行了封装
3.1.头部导航栏
3.2.轮播图
3.3九宫格
3.4楼层

1.首先是轮播图，导航组件的拆分
2.然后再shou.json中进行引入

<!-- 轮播图 -->
<w-swiper bannere="{{banners}}"></w-swiper>
<!-- 导航组件 -->
<w-headese list='{{list}}'></w-headese>

2.引入

{
  "usingComponents": {
    "w-swiper":"/components/swiper/swiper",
    "w-headese":"/components/headese/headese"
  }
}

3.在创建子组件的时候会生成一个properties一个方法来进行接收数据，页面正常的显示

  properties: {
    bannere:{
      type:Array,
      value:[]
    }
  },

//轮播图
<swiper autoplay='true' interval='2000'>
  <block wx:for="{{bannere}}" wx:key='index'>
    <swiper-item>
      <image src="{{item.image_src}}"></image>
    </swiper-item>
  </block>
  </swiper>
  //九宫格
  <view>
  <block wx:for="{{list}}" wx:key='index'>
    <image src="{{item.image_src}}" class="imgs"></image>
  </block>
</view>

4.请求所有数据的方法

// pages/shou/shou.js
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    banners:[],
    list:[],
    louceng:[],
    louceng1:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 轮播图请求数据
    app.http.banner().then(res =>{
      // console.log(res)
      let { message } =res.data
      // console.log(message)
      this.data.banners =message
      this.setData({
        banners:message
      })
      // console.log(this.data.banners)
    })

    //导航请求数据
    app.http.headese().then(res =>{
        // console.log(res)
        let {message } =res.data
        this.data.list = message
        // console.log(this.data.list)
        this.setData({
          list:message
        })
    })
    app.http.louceng().then(res =>{
      // console.log(res)
      let { message } =res.data
      // console.log(message)
      // this.data.louceng1 =message.product_list
      // console.log(this.data.louceng1)
      this.setData({
        louceng:message
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

5.首页的页面的样式

/* pages/shou/shou.wxss */
#input{
  border:1px solid black;
  width: 700rpx;
  height: 50rpx;
  margin-left:25rpx ;
  /* margin-top:10rpx ; */
  border-radius: 5px;
  background:white ;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.head{
  height: 100rpx;
  background: #eb4450;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgs{
  width: 750rpx;
  height: 40rpx;
  /* max-resolution: top ; ; */
}
.b{
  width: 330rpx;
  height: 300rpx;
}
.c{
  width: 140rpx;
  height: 140rpx;
  margin-left:15rpx ;
}
.d{
  width: 140rpx;
  height: 140rpx;
  margin-left:15rpx ;
}
.e{
  width: 140rpx;
  height: 140rpx;
  /* margin-left:340rpx; */
  position: absolute;
  right: 269rpx;
}
.f{
  width: 140rpx;
  height: 140rpx;
  margin-left:15rpx ;
  position: absolute;
  right: 120rpx;
}
//拆除去的九宫格样式
.imgs{
  width: 189rpx;
  height:200rpx;
}

接下来的操作就是和上面的是一样的，这里就不具体的写了

2.分类的讲解

 1.其实分类首先我们是要将分类的页面布局先布好，这样可以让我们为了后续的数据渲染更加的简单
 2.页面布局我们是分成两个部分，用来实现点击左边菜单栏，右边进行变化

1.分类的页面布局

<view class="head">
  <view id="input" class="iconfont icon-sousuo">
    搜索
  </view>
</view>
<view class="one">
  <!-- 左侧菜单栏 -->
  <scroll-view class="careleft" scroll-y>
    <block wx:for="{{leftlist}}" wx:key='index'>
      <view class="leftcolor" bindtap="addlist" data-index="{{index}}" class="{{index == indexs ? 'aricve' :''}}">
        {{item.cat_name}}</view>
    </block>
  </scroll-view>

  <!-- 右侧菜单栏 -->

  <scroll-view class="careright" scroll-y wx:if="{{indexs==0}}">
    <block wx:for="{{lefts}}" wx:key='index'>
      <view class="rigths">
        /{{item.cat_name}}/
      </view>
    </block>
  </scroll-view>

  <scroll-view class="careright" scroll-y wx:if="{{indexs!=0}}">
    <block wx:for="{{goods}}" wx:key='index'>
      <view class="rigths">
        /{{item.cat_name}}/
      </view>

      <view  class="a">
        <view class="b" wx:for="{{item.children}}" wx:key='index'>
          <image src="{{item.cat_icon}}" class="imgs" bindtap="goodlist" data-item="{{item}}"></image>
          <text>{{item.cat_name}}</text>
        </view>
      </view>

    </block>
  </scroll-view>

</view>

3.分类页面的css样式

#input{
  border:1px solid black;
  width: 700rpx;
  height: 50rpx;
  margin-left:25rpx ;
  /* margin-top:10rpx ; */
  border-radius: 5px;
  background:white ;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.head{
  height: 100rpx;
  background: #eb4450;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.one{
  box-sizing: border-box;
  width: 100vh;
  height: calc(100vh - 100rpx);
  border: 2px solid black ;
  display: flex;
}
.careleft{
  flex: 1;
  border: 1px solid black;
}
.careright{
  flex: 4;
  border: 1px solid black;
}
.leftcolor{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border:1px solid black ;
}
.aricve{
  border: 1px solid res;
  border-right: none;
  border-top:none;
  border-bottom: none;
  color: red;
}
.rigths{
  width: 100%;
  height: 80rpx;
  border: 1rpx solid black ;
  line-height: 80rpx;

}
.imgs{
  width: 100%;
  height: 100rpx;
}
.a{
  width: 100%;
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
 margin-top:30rpx ;
}
.b{
  width: 200rpx;
  height: 200rpx;
  /* border:1px solid red ; */
  margin-top: 40rpx;
}

3.然后就是进行请求数据

  data: {
    leftlist:[],
    indexs:0,
    goods:[],
    lefts:[]
  },
  //左边菜单栏的数据请求
 onLoad: function (options) {
     app.http.scroll().then(res =>{
       console.log(res)
       let { message } =res.data 
      // console.log(message[0].children);
       this.setData({
        leftlist: message,
        lefts:message[0].children
       })
     
     })
  },

3.如何实现点击左边菜单栏，右边进行数据的渲染
1首先我们要给侧边栏设置一个点击事件，传递一个所有
来进行页面的渲染

 <scroll-view class="careleft" scroll-y>
    <block wx:for="{{leftlist}}" wx:key='index'>
      <view class="leftcolor" bindtap="addlist" data-index="{{index}}" class="{{index == indexs ? 'aricve' :''}}">
        {{item.cat_name}}</view>
    </block>
  </scroll-view>

 addlist(e){
    console.log(e)
    let index = e.currentTarget.dataset.index
    // console.log(index)
    let good = this.data.leftlist[index].children
    // console.log(good)
    this.setData({
      indexs:index,
      goods:good
    })
  },

4.还有就是点击右侧图片进入列表页面
首先我们要个图片设置一个点击事件，传入我们的id,进行一个具体数据的一个渲染

页面结构

  <view  class="a">
        <view class="b" wx:for="{{item.children}}" wx:key='index'>
          <image src="{{item.cat_icon}}" class="imgs" bindtap="goodlist" data-item="{{item}}"></image>
          <text>{{item.cat_name}}</text>
        </view>
      </view>

js代码

  goodlist(e){
    console.log(e)
    let item = e.currentTarget.dataset.item.cat_id
    console.log(item)
      wx.navigateTo({
        url: `/pages/goods_list/goods_list?id=${item}`,
      })
  },
 

这样算是完成了分类的具体操作