首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序简单循环列表数据渲染实例

小程序简单循环列表数据渲染实例

作者头像
王小婷
发布2019-01-02 13:02:02
1.2K0
发布2019-01-02 13:02:02
举报
文章被收录于专栏:编程微刊编程微刊

写一个最常见的小demo,小程序简单循环列表数据渲染实例。

wxml

<view class="item-box">
  <view class="items">
    <view wx:for="{{list}}" wx:key="{{index}}" class="item">
      <view data-index="{{index}}" class="inner txt">
        <i>{{item.rank}}</i>
        <image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>
        <i> {{item.name}}</i>
        <span class="item-data">
          <i class="rankpace"> {{item.pace}}</i>
        </span>
      </view>
    </view>
  </view>
</view>

wxss

view {
  box-sizing: border-box;
}

.item-box {
  width: 700rpx;
  margin: 0 auto;
  padding: 40rpx 0;
}

.items {
  width: 100%;
}

.item {
  position: relative;
  border-top: 2rpx solid #eee;
  height: 120rpx;
  line-height: 120rpx;
  overflow: hidden;
}

.item:last-child {
  border-bottom: 2rpx solid #eee;
}

.inner {
  position: absolute;
  top: 0;
}

.inner.txt {
  background-color: #fff;
  width: 100%;
  z-index: 5;
  padding: 0 10rpx;
  transition: left 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-icon {
  width: 64rpx;
  height: 64rpx;
  vertical-align: middle;
  margin-right: 16rpx;
  margin-left: 13px;
  border-radius: 50%;
}

.item-data {
  float: right;
  margin-right: 5%;
}

.rankpace {
  color: #fa7e04;
}

js

Page({
  data: {},
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.tempData();
  },
  //测试临时数据
  tempData: function() {
    var list = [{
        rank: "1",
        txtStyle: "",
        icon: "/images/my.png",
        name: "李飞",
        pace: "23456",
      },
      {
        rank: "2",
        txtStyle: "",
        icon: "/images/my.png",
        name: "张叶",
        pace: "23450",
      },
      {
        rank: "3",
        txtStyle: "",
        icon: "/images/my.png",
        name: "王小婷",
        pace: "22345",
      },
      {
        rank: "4",
        txtStyle: "",
        icon: "/images/my.png",
        name: "袁经理",
        pace: "21687",
      },
      {
        rank: "5",
        txtStyle: "",
        icon: "/images/my.png",
        name: "陈雅婷",
        pace: "21680",
      },
      {
        rank: "6",
        txtStyle: "",
        icon: "/images/my.png",
        name: "许安琪",
        pace: "20890",
      },
      {
        rank: "7",
        txtStyle: "",
        icon: "/images/my.png",
        name: "里俊飞",
        pace: "20741",
      },
      {
        rank: "8",
        txtStyle: "",
        icon: "/images/my.png",
        name: "李小俊",
        pace: "19511",
      },
      {
        rank: "9",
        txtStyle: "",
        icon: "/images/my.png",
        name: "陈俊飞",
        pace: "19501",
      },
    ]

    this.setData({
      list: list
    });
  }
})

效果是这样的:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.12.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档