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

写一个最常见的小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
    });
  }
})

效果是这样的:


5640239-5fd44c853975f50a.png

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值