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


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中输入验证中一个不错的效果
Aug 21 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
Python 字符串操作方法大全
2014/03/11 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python中return函数返回值实例用法
2020/11/19 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
食品安全责任书
2014/04/15 职场文书
个人投资计划书
2014/05/01 职场文书
投标诚信承诺书
2014/05/26 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
医院见习报告范文
2014/11/03 职场文书
单位租车协议书
2015/01/29 职场文书
朋友聚会开场白
2015/06/01 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript