微信小程序用户盒子、宫格列表（CSS）

效果图如下所示

.wxml

<view class='user-box' style="margin-top:20rpx;"><view class='ctn'><view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"><image mode="widthFix" src='/images/dfk.png'></image><text>退换/售后</text><view>查看明细</view></view></view>
</view><view class='user-box' style="margin-top:20rpx;"><view class='ctn'><view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"><image mode="widthFix" src='/images/dfk.png'></image><text>退换/售后</text></view></view>
</view><view class='user-box' style="margin-top:20rpx;"><view class='ctn cuin'><view class='list' wx:for="{{6}}" wx:key data-index="{{index}}" style="width:33.33%;"><image mode="widthFix" src='/images/dfk.png'></image><text>退换/售后</text></view></view>
</view><view class='user-box' style="margin-top:20rpx;"><view class='ctn'><view class='list' wx:for="{{4}}" wx:key data-index="{{index}}" style="padding:10rpx 0 20rpx 0;"><image style="position:relative;top:10rpx" mode="widthFix" src='/images/dfk.png'></image><text style="border-right:1px solid #ddd;">退换/售后</text><view>查看明细</view></view></view>
</view><view class='user-box' style="margin-top:20rpx;"><view class='ctn'><view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"><span class="user-span">99+</span><image mode="widthFix" class="user-image" src='/images/dfk.png'></image><text>退换/售后</text></view></view>
</view>

.wxss

page{background-color: #f7f7f7;
}
view{box-sizing: border-box;
}
.user-box{ width: 100%;float: left;overflow: hidden;background-color: #fff; }
.user-box .ctn{ display: flex;justify-content:flex-start;align-items: center;flex-wrap:wrap;}
.user-box .ctn .list{ text-align: center; width: 25%; padding:20rpx 0 20rpx 0; position: relative;}
.user-box .ctn .list image{ width: 50rpx; height: auto;}
.user-box .ctn .list text{ display: block; font-size: 24rpx; padding-top: 10rpx;}
.user-box .ctn .list view{font-size: 16rpx;color: #ccc;position: relative;top: 4rpx;}.cuin view:nth-child(6){border-top: 1px solid #ddd;
}
.cuin view:nth-child(5){border-right: 1px solid #ddd;border-top: 1px solid #ddd;
}
.cuin view:nth-child(4){border-right: 1px solid #ddd;border-top: 1px solid #ddd;position: relative;
}
.cuin view:nth-child(2){border-right: 1px solid #ddd;
}
.cuin view:nth-child(1){border-right: 1px solid #ddd;
}.user-span{font-size: 18rpx;height: 28rpx;display: flex;align-items: center;background-color: #e54d42;color: #fff;padding: 0 8rpx 4rpx 10rpx;border-radius: 200rpx;position: absolute;top: 10rpx;right: 20rpx;
}

一些常见的盒子模型，直接复制粘贴就完了，简洁明了

有什么问题欢迎评论留言，我会及时回复你的

微信小程序用户盒子、宫格列表（CSS）相关推荐

html 小程序九宫格抽奖,微信小程序实现多宫格抽奖活动
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样, ...
微信小程序开发实现宫格布局
微信小程序开发实现宫格布局问题背景客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析先上效果图 ...
微信小程序抽奖9宫格
抽奖9宫格示例库代码片段
微信小程序商品布局宫格、列表、大图模式切换
效果: 搜索框内容处理.商品布局切换.手风琴模式弹出层.上拉触底加载下一页等等... 业务逻辑已经写好,接通后端接口就可以了,这里使用模拟数据展示! 1.在项目根部创建一个 components 文件 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
获取小程序用户信息+java_java获取微信小程序用户信息
第一步:获取openid.session_key等信息. /** * 获取微信小程序的用户openid和session_key/unionid * 返回格式:{"session_key&qu ...
webform窗体怎么实现session唯一标识_微信小程序用户登录和登录态维护的实现_javascript技巧...
这篇文章主要介绍了微信小程序用户登录和登录态维护的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧让用户登录,标识用户和获取 ...

微信小程序用户盒子、宫格列表（CSS）

.wxml

.wxss

微信小程序用户盒子、宫格列表（CSS）相关推荐

最新文章

热门文章