微信小程序用户盒子、宫格列表的实现


Posted in Javascript onJuly 01, 2020

最近在学习小程序,看到别人九宫格的做法,就留个笔记,也分享给大家

效果图如下所示

微信小程序用户盒子、宫格列表的实现

.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;
}

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

到此这篇关于微信小程序用户盒子、宫格列表的实现的文章就介绍到这了,更多相关小程序用户盒子、宫格列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 #Javascript
vue实现购物车列表
Jun 30 #Javascript
vue实现简单图片上传
Jun 30 #Javascript
vue基于better-scroll仿京东分类列表
Jun 30 #Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
详细探究Python中的字典容器
2015/04/14 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
简单了解python的break、continue、pass
2019/07/08 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
集团薪酬管理制度
2014/01/13 职场文书
伊琍体标语
2014/06/25 职场文书
大学生暑期实践报告
2015/07/13 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python