经过了昨天的内容,相信大家已经多微信小程序的前端页面编写有了一定的认识,昨天的内容是非常重要的,尤其是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等实战学习资料