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


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 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php显示页码分页类的封装
2017/06/08 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python正规则表达式学习指南
2016/08/02 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python写一个md5解密器示例
2018/02/23 Python
python得到windows自启动列表的方法
2018/10/14 Python
python实现键盘控制鼠标移动
2020/11/27 Python
pycham查看程序执行的时间方法
2018/11/29 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
政风行风整改报告
2014/11/06 职场文书
2015年公务员工作总结
2015/04/24 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Vue如何实现组件间通信
2021/05/15 Vue.js
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS