很久没有写css的博客了,因为感觉平时写的都很基础,这次有个九宫格的需求用自己的方式实现了所以记录一下,可能会有不足的地方!
九宫格代码
html
<view class="photos">
<view v-for="(item,index) in list" :key="index" :class="(index == 2 || index == 5 || index == 8)?'':'mr'"></view>
</view>
css
这里将view宽高做了一个适配,宽度在不同机型上面几乎都不一样,所以使用计算属性,先减去两边的一个边距,再减去九宫格的边距,右边距是根据索引来进行判断的,第三张第六张第九张是不需要右边距的,所以索引为258的都不需要,又减去了1rpx因为移动端rpx这个单位吧。。很奇怪
.photos {
width: calc(100vw - 80rpx);
border-radius: 16rpx;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
&>view {
width: calc(((100vw - 80rpx)/3) - 1px);
height: calc(((100vw - 80rpx)/3) - 1px);
margin-bottom: 1.5px;
background: url('https://ts1.cn.mm.bing.net/th/id/R-C.d3e0603de2bfc9b811df55820c7a1a32?rik=DUR1qa4femur6w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50073%2f8464.jpg_wh1200.jpg&ehk=El%2fvrDPlNonn%2f7EQsDx2tDZHuHQsYwfvUX5cv7ifjU0%3d&risl=&pid=ImgRaw&r=0') no-repeat center center;
background-size: cover;
}
.mr {
margin-right: 1.5px !important;
}
}
}
九宫格展示
下面这个是整个静态页面的全部代码,仅供参考
<template>
<view class="index">
<view class="container" v-for="(item,index) in list" :key="index">
<view class="shop">
<view class="left">
<view class="img"></view>
<view class="shop_info">
<div class="name">前海万联旗舰店</div>
<view class="time">
2020-09-25
</view>
</view>
</view>
<view class="right">
<view class="attention" @click="handle(index)" :class="item?'ygz':''">
{{item?'已关注':'关注'}}
</view>
<view class="shop_icon">
</view>
</view>
</view>
<view class="info">
<view class="text">
<text class="tag" :class="index%2?'sx':''">
{{index%2?'上新':'种草'}}
</text>
一款基于 FastAdmin + Uni-APP 开发的
多终端(H5移动端、APP、微信小程序、微信公众号)、多用户商城系统拥有多种运营模式B2B2C/B2C,内置独立商家后台、商城装修、短视频、社区种草、全终端直播、阶梯拼团,智能客服等功能,一键下载配置完整的Uni-APP客户端工程源码,前后端无加密源码,方便自行二次开发,私有化部署!
</view>
<view class="photos">
<view v-for="(item,index) in list" :key="index"
:class="index == 2 || index == 5 || index == 8?'':'mr'"></view>
</view>
</view>
<view class="product">
<view class="img"></view>
<view class="pro_info">
<div class="info_text">
多终端(H5移动端、APP、微信小程序、微信公众号)、多用户商城系统拥有多种运营模式B2B2C/B2C,内置独立商家后台、商城装修、短视频、社区种草、全终端直播
</div>
<div class="price">
¥22.00
</div>
</view>
<view class="">
>
</view>
</view>
<view class="num">
<view class="view">4196阅读</view>
<view class="num_right">
<view class="like">190</view>
<view class="comment">152</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'seeding',
data() {
return {
list: [false, false, false, false, false, false, false, false, false],
}
},
methods: {
handle(i) {
this.list[i] = !this.list[i]
this.$forceUpdate()
}
},
}
</script>
<style scoped lang="scss">
view {
line-height: 1.3 !important;
}
.index {
padding: 20rpx 20rpx 1rpx 20rpx;
box-sizing: border-box;
.container {
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
.shop {
display: flex;
align-items: flex-start;
justify-content: space-between;
&>.left,
&>.right {
display: flex;
align-items: center;
justify-content: center;
.attention {
width: 110rpx;
height: 50rpx;
display: flex;
font-size: 26rpx;
border-radius: 12rpx;
align-items: center;
justify-content: center;
background-color: #fe4d4c;
color: #fff;
}
.shop_icon{
margin-left: 20rpx;
height: 50rpx;
width: 50rpx;
border-radius: 50rpx;
background-color: #f0f0f0;
}
.ygz {
background-color: #f0f0f0;
color: #000;
}
&>.img {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
background: url('https://ts1.cn.mm.bing.net/th/id/R-C.d3e0603de2bfc9b811df55820c7a1a32?rik=DUR1qa4femur6w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50073%2f8464.jpg_wh1200.jpg&ehk=El%2fvrDPlNonn%2f7EQsDx2tDZHuHQsYwfvUX5cv7ifjU0%3d&risl=&pid=ImgRaw&r=0') no-repeat center center;
background-size: cover;
}
.shop_info {
height: 80rpx;
padding: 6rpx 0 6rpx 16rpx;
box-sizing: border-box;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
&>view {
line-height: 1;
}
.name {
font-size: 28rpx;
}
.time {
font-size: 24rpx;
color: #999;
}
}
}
}
.info {
.text {
margin: 20rpx 0;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制多行的行数
-webkit-box-orient: vertical;
.tag {
color: #fff;
font-size: 16rpx;
background: linear-gradient(to right, #fb8a39, #f15357);
padding: 5rpx 10rpx;
border-radius: 8rpx;
margin-right: 10rpx;
}
.sx {
background: linear-gradient(to right, #3cd6fa, #3377e0) !important;
}
}
.photos {
width: calc(100vw - 80rpx);
border-radius: 16rpx;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
&>view {
width: calc(((100vw - 80rpx)/3) - 1px);
height: calc(((100vw - 80rpx)/3) - 1px);
margin-bottom: 1.5px;
background: url('https://ts1.cn.mm.bing.net/th/id/R-C.d3e0603de2bfc9b811df55820c7a1a32?rik=DUR1qa4femur6w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50073%2f8464.jpg_wh1200.jpg&ehk=El%2fvrDPlNonn%2f7EQsDx2tDZHuHQsYwfvUX5cv7ifjU0%3d&risl=&pid=ImgRaw&r=0') no-repeat center center;
background-size: cover;
}
.mr {
margin-right: 1.5px !important;
}
}
}
.product {
border-radius: 16rpx;
overflow: hidden;
background-color: #f9f9f9;
margin: 20rpx 0 32rpx 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
padding-right: 16rpx;
box-sizing: border-box;
&>.img {
width: 100rpx;
height: 100rpx;
background: url('https://ts1.cn.mm.bing.net/th/id/R-C.d3e0603de2bfc9b811df55820c7a1a32?rik=DUR1qa4femur6w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50073%2f8464.jpg_wh1200.jpg&ehk=El%2fvrDPlNonn%2f7EQsDx2tDZHuHQsYwfvUX5cv7ifjU0%3d&risl=&pid=ImgRaw&r=0') no-repeat center center;
background-size: cover;
}
.pro_info {
flex: 1;
padding-left: 16rpx;
box-sizing: border-box;
.info_text {
width: calc(100vw - 240rpx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 26rpx;
}
.price {
font-size: 24rpx;
color: #e7833e;
font-weight: bold;
}
}
}
.num,
.num_right {
display: flex;
align-items: center;
justify-content: space-between;
view {
font-size: 24rpx !important;
color: #999 !important;
}
.comment {
padding-left: 32rpx;
box-sizing: border-box;
}
}
}
}
</style>
页面展示
有任何问题请评论区留言或者私信我!