微信小程序云开发项目实战之商城开发日记 03

经过了昨天的内容，相信大家已经多微信小程序的前端页面编写有了一定的认识，昨天的内容是非常重要的，尤其是flex布局，会贯彻整个项目的开发。

今天我们来编写tabbar页中的分类页的前端代码。

分类页我的设计就是很大众的那种，左右布局，左边提供分类框，右边展示对应分类的商品。核心要点还是flex布局。

我们先把整体的框架做出来

<view class="body">

 <view class="left"></view>

 <view class="right"></view>

</view>

page {

 width: 100%;

 height: 100%;

}

.body {

 display: flex;

 flex-direction: row;

 width: 100%;

 height: 100%;

}

.body > .left {

 width: 25%;

 background-color: red;

}

.body > .right {

 width: 75%;

 background-color: black;

}

效果：

我们可以看到现在左右布局的框架已经出来了

下面我们开始填充其内部的内容。

左边的分类和首页那里的分类一样，还是10种，大家也可以根据实际需求进行更改。

我们先来写左边的部分：

<view class="left">

  <view wx:for="{{left_name}}" wx:key="index" bindtap="selectId" data-name="{{item.name}}"

   class="{{name == item.name ? 'left_name_hover' : ''}}">

   <view class="name">{{item.name}}</view>

  </view>

 </view>

.left {

 width: 25%;

 height: 100%;

 background-color: #f3f3f3;

 display: flex;

 flex-direction: column;

 justify-content: center;

 align-items: center;

}

.left > view , .left_name_hover {

 text-align: center;

 height: 10%;

 font-size: 28rpx;

 width: 100%;

 display: flex;

 justify-content: center;

 align-items: center;

}

.left_name_hover {
    
 background-color: white;

 color: green;

 border-left: 20rpx solid green;

}

data: {

  left_name:[

   {id:1,name:'水果'},

   {id:2,name:'蔬菜'},

   {id:3,name:'肉禽蛋品'},

   {id:4,name:'海鲜水产'},

   {id:5,name:'粮油调味'},

   {id:6,name:'熟食卤味'},

   {id:7,name:'冰品面点'},

   {id:8,name:'牛奶面包'},

   {id:9,name:'酒水冷饮'},

   {id:10,name:'休闲零食'}

]

 },

 selectId(res){

  var that = this;

  var name = res.currentTarget.dataset.name;

  console.log(name);

  that.setData({

   name:name

  })

 },

这段代码其实还是一个对flex布局的运用，要注意到的一个是，我在里面用了一个三目运算的操作。

因为用户在点击左边的分类时，被点击的块肯定要出现选中的状态。如果用hover伪类来做的话，达不到我们的要求，所以我通过三目运算动态添加它的class。

在这里给大家讲一个知识点，组件的data-属性，大家可以看到我在一个view上写了一个data-name="{{item.name}}"的操作，而且这个view是存在点击事件selectId的，data-可以向事件传递一个参数，我们在selectId里获取的那个res.currentTarget.dataset.name就是我们在组件上写的那个data-name。这个知识点还是比较重要的，当你需要通过组件传递给事件参数的时候，这样比较容易。

看一下效果：

还是比较nice的。

下面我们来写右边的内容。

<view class="right">

  <image src="../../images/banner.jpg" mode="widthFix"></image>

  <view class="product" wx:for="{{product}}">

   <image src="{{item.img_src}}"></image>

   <view class="text">

​    <text>{{item.name}}</text>

​    <text>{{item.desc}}</text>

​    <text>￥{{item.price}}</text>

   </view>

   <text>销量：{{item.count}}</text>

  </view>

 </view>

.right > image {

 width: 95%;

 border-radius: 100rpx;

 height: 300rpx;

 margin: 0 auto; 

 margin-top: 30rpx;

 display: flex;

}

.product {

 width: 100%;

 display: flex;

 flex-direction: row;

 align-items: center;

 position: relative;

 padding-left: 20rpx;

}

.product > image {

 width: 100rpx;

 height: 100rpx;

}

.product > .text {

 display: flex;

 flex-direction: column;

 margin-left: 20rpx;

}

.product > .text :nth-child(1){

 margin: 20rpx 0;

 font-weight: bold;

}

.product > .text :nth-last-child(2){

 color: gray;

 font-size: 26rpx;

}

.product > .text :nth-child(3){

 color: red;

 margin-top: 20rpx;

}

.product > text {

 position: absolute;

 right: 40rpx;

 bottom: 10rpx;

 font-size: 26rpx;

}

data: {

  product:[

   {img_src:'../../images/apple.png',name:'苹果',desc:'6元一斤，进口水果',price:6,count:33},

   {img_src:'../../images/egg.png',name:'鸡蛋',desc:'10元一斤，存量不多，想要的尽快',price:10,count:44},

   {img_src:'../../images/watermelon.png',name:'西瓜',desc:'4元一斤，又大又甜',price:4,count:55},

  ]

 },

到现在为止，大家看这些代码的时候，应该已经比较熟练了才多，wx：for + flex布局就非常好的完成了这部分代码的编写。

效果：

我们现在写的都是死数据，等我们做到前后端交互的时候，才能实现数据的动态渲染。

今天的内容差不多要结束了，如果你真的跟着我连着敲了两天，你会发现，微信小程序的前端页面编写起来是比较简单的。熟练掌握flex布局，会查文档，会用组件即可。

点赞、关注、收藏都是对作者莫大的鼓励，谢谢！

有任何问题可以联系QQ：505417246

零基础入门微信小程序云开发QQ群：1073011570

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料