【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)

简介: 【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)

wxml

<view class="row-grid">
  <view class="row-grid-item" wx:for="{{rowGridItems}}" wx:key="*this" bindtap="rowGridTap">
    <text class="num">{{item.num}}</text>
    <view class="title">
      <image src="{{item.imgUrl}}" mode="aspectFit" />
      <text class="text">{{item.text}}</text>
    </view>
    <text class="tag">{{item.tag}}</text>
  </view>
</view>

wxss

.row-grid {
  display: flex;
  flex-wrap: no-wrap;
  width: 100%;
  height: 150rpx;
  box-shadow: 0 10rpx 30rpx #00000011;
}
 
.row-grid .row-grid-item {
  position: relative;
  padding: 20rpx;
  width: 33.3%;
  box-sizing: border-box;
  border: 1px solid #eee;
  flex-direction: column;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.row-grid .row-grid-item .num {
  font-size: 30rpx;
  color: red;
}
 
.row-grid .row-grid-item .title {
  display: flex;
  align-items: center;
}
 
.row-grid .row-grid-item image {
  margin: 0 auto;
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
}
 
.row-grid .row-grid-item .text {
  font-size: 20rpx;
  color: #999;
}
 
.row-grid .row-grid-item .tag {
  font-size: 20rpx;
  border-radius: 30rpx;
  padding: 2rpx 10rpx;
  height: 30rpx;
  color: white;
  background: red;
  position: absolute;
  margin: auto;
  top: 10rpx;
  right: 10rpx;
}

js

Page({
  data: { 
    rowGridItems: [{
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '回收量',
        num: 141230.9,
        tag: '本月'
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '销售量',
        num: 3214.1,
        tag: '本周'
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '打包总量',
        num: 9963.2,
        tag: '本季度'
      },
    ]
  }, 
  rowGridTap(e) {
    console.log(e);
  },
})


相关文章
|
5天前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
5天前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
5天前
|
小程序 JavaScript 前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
|
5天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
28 0
|
5天前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
5天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
5天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
5天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
5天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
5天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。

热门文章

最新文章