小程序实现循环列表功能

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

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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见

关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源200G干货大全。

小程序实现循环列表功能

猜你喜欢