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

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

wxml

  
    
      
        {{item.rank}}
        
         {{item.name}}
        
           {{item.pace}}
        
      
    
  

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
    });
  }
})

效果是这样的：

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