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


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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
IE8 原生JSON支持
Apr 13 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Vue shopCart 组件开发详解
Jan 26 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
react 生命周期实例分析
May 18 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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
PHP 错误之引号中使用变量
2009/05/04 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
PHP7修改的函数
2021/03/09 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python版飞机大战代码分享
2018/11/20 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python 实用工具状态机transitions
2020/11/21 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
《狐假虎威》教学反思
2014/02/07 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python