小程序template模板的使用，写好wxml和wxss，在别的页面引用

1.文件夹建好，template（名字自己取）文件夹里放模板文件wxml,wxss，在需要用的页面进行引入对应的wxml和wxss

2.template里的color.wxml

<template name="lplist">
<!-- 根据自己需要，如果只有一层需要循环的数据，这里就一层循环即可 -->
<!-- 如果有数据两层，这里就写两层循环 -->
  <block wx:for="{{lpListItem}}" wx:for-item="list" wx:for-index="outerIndex" wx:key="outerIndex">
  <block wx:for="{{list}}" wx:for-item="item" wx:for-index="innerIndex" wx:key="innerIndex">
    <view class='yhul'>
      <view class=''>
          <navigator url="/pages/lpdetail/lpdetail?id={{item.id}}" open-type="navigate" class='yhli flex flexSb'>
            <view class='yhli_l'>
              <view class='yhli_l_pic'>
                <image src='{{item.cover_pic}}'></image>
              </view>
              <view class='yhli_l_msg'>{{item.distname}}</view>
            </view>
            <view class='yhli_r'>
              <!--title  -->
              <view class='flex yhli_r_title alignC'>
                <!-- 1：标签 -->
                <view class='yhli_r_titel_l yhli_orange'>{{item.statusname}}</view>

                <view class='yhli_r_titel_r'>{{item.name}}</view>
              </view>
              <!-- price -->
              <view class='yhli_r_price flex'>
                <view class='yhli_r_price_l'>产地</view>
                <view class='yhli_r_price_r'>{{item.averageprice}}
                  <!-- <text>元/㎡</text> -->
                </view>
              </view>
              <!-- 套数中签率 -->
              <view class='yhli_r_tz flex flexSb f24'>
                <view class='yhli_r_tz_l flex flexSb'>
                  <view class='mr20'>数量</view>
                  <view>
                    <text class='bold'>{{item.housenum}}</text><!-- 套 --></view>
                </view>
                <view class='yhli_r_tz_r flex flexSb'>
                  <view class='mr20'>等级</view>
                  <view>
                    <text class='bold'>{{item.winrate}}</text>
                  </view>
                </view>
              </view>
              <!-- 登记时间 -->
              <view class='yhli_dj flex'>
                <view class='mr20'>说明</view>
                <view>{{item.registertime}}</view>
              </view>
            </view>
          </navigator>
        </view>   
      </view>
  </block>
  </block>
</template>

3.template里的color.wxss

.yhli {
  padding: 40rpx 0;
  border-top: 1px solid #e5e5e5;
}

.yhli_l {
  position: relative;
}

.yhli_l, .yhli_l_pic {
  width: 220rpx;
  height: 165rpx;
  border-radius: 4rpx;
  -webkit-border-radius: 4rpx;
  -moz-border-radius: 4rxp;
  overflow: hidden;
}

.yhli_l image {
  width: 100%;
  height: 100%;
}

.yhli_l_msg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAyCAYAAAA3FLVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyMzBCMjc4ODk2NzExRTg4MkIwRUUwNEY2RTMxMDZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyMzBCMjc5ODk2NzExRTg4MkIwRUUwNEY2RTMxMDZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzIzMEIyNzY4OTY3MTFFODgyQjBFRTA0RjZFMzEwNkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzIzMEIyNzc4OTY3MTFFODgyQjBFRTA0RjZFMzEwNkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66yGjkAAAJaUlEQVR42uydbXPjNgyEl0quM+30//9ddu7m0jqOxH0WpBQntT7cxbZeKBIEFgsQbJI2/Xf03/+3u89v391/fjvn6Hzd3XvvvPtj77qjZx79pp12u/+T+5Dfq31K27LXD+3geXt/y7R31H+C92iwjRr83s376qB9PZCJo/EjMtvMb+/a9/OfF7GjmYmiQcfO3nfF893nq47qc48UxMpnpPe7og+dTCW/n9UXtA3t5x8/BlrCaTJNnJceTuvN3LdNXLeqLem1yfnUMq0ap0q73HXUOjcgP+m4Cs4LN4d+ffmHgXSkc+yDwMt3CBndBBSAWzIDPep0B4vSwVJBwXXwDkfwNYHs9Pe2SEE5aHwkp4nySya2g7OpfP6ClH+aQRXwVTo8h/pNTtg18Mfc4FCFQSYi6SM6cbrxZ/ugr2QgXzOa2PVhOlllxrqDCd5MG3qoJBTKxshvpgrqw/1/fvgLOrJEGxB/yQkXdZIpMUKsMMXkzVgP+i6tMIHdpCfj5ixKIswJAdbBBHIToisjgpzsELklBqYB1NZvT/4bmEeKqUlnOgtC2tAr2gVMytRvINZLAaPWzSRLJlMCPYlPkghf6j8l4yGjCN04JfA7IU+InPTXHZaSQqF29xLbxWRF6piTNqYCSb87i0gQ7P83wdgmlMptHzqFN7q+8m4atH/Gb+wBQpqRw3cTbtPz+E5HhQb/rBDJqnY9avs/HG8TjsAzQp4kxIuDLJSYSAaP+nLNOM8EFjb4nfMNVRC6BgmUPetBYn0uOC1AOCTj5azQvRV1/tgqOXLuy+6EexnALwcrN0AuEN9p7/MGIWIay9kK8NAplHbQJ9vAgd4gwaNim0d9OhLcbQADCVQlJE7in2+mP0awk7KvGzQaRDEOWc89SFl1GFPNMaNtqtkWlWyTWWtLQxdnPb9iRar9PGtBXNpWVQ5UkEUteu93v71ZOBKY7QNNrgOLGEXhjQWqBlhJSIP+tjLDZQWBVGVXKUHSTmgHtQj3crZBOUpCWfTz0QTbAOJ519ZbC+diXESTS3NxtJFPkGo/ai2Ij5U83/lSRAkRnygJOleD9T30Ren9pHrcNrF8SZvpMwliOhy7ex/uSrankuj81dnAr/Lc2QTrr8aOXtaOvTjcCKKlDi/RTi18DrEeSXCYwrr0/StQq/reyXhUryUwbS8+67JAmrJ8VLJ0pzm28IAEIW6VinLw67vbCZfkDlJGkppqMtB0zdesIHZD85Jsi6p/mPatlOc+toLyqayMoHmQJOUvSSYnhFMrjFtCvBym3I1YyiaeUpQyj07AiX8i01lJzh/1+6hiIn4YaX8rKL1k7RiZKETxEkY6eUbFr+uwvVK2cDfhJFxC/7+QsoHZTIkNAvFIxyUT2ZEdEguyO8ueWA832atZ7mkCr8BEcK5AYvHTfNk0qVzBpEwsVMUqJt9/mHB94oEp6+NMcHI/mqkyuwYrYUlTmlmhInMWNM2WJ+9T8Z1mVqHMEG7Jyn+ijGg7bH/e+nAVTUU0jgLqWEDb90KnOEsh+OwEEjn6WIEV0KSQo6Uj8JykzopbClQNeVBig1jHSs0WgmJ2J/rRhJslUJz2IfApCZgTgWsT5woMMnHEKZSurjJQRQgKiiYdL7LGrQo5CR9Aiwal7kDCPuuWpUwhDJn9LRyMpLJUykRWriOsYfKsFTU5Ghzc2dozTihnjwqrnCCDdnJbyz7r629YedYxkxx8VpGbM9u/+t2uTDH7SuPyCHJQOt4m3MpyctVUq4RdI85ypU3pko4k7Y1m1cy8V8Ly0v5ZFVbR5PVXrPNLOYj4eUeB7yRo7XL10gI/1MGmBV2JxaIkTpJvR2uUJLApDeJSRUDIDRKfJWGUHgh7sgrBZR65sEbCBlfXNX5YLTCTBZE41s7Zp/dcjcGTCVp9v6Qsn4zvW/WxKqlvVWGmPk9S2oOSHLSOyUy6XpL6iHIpU9NayUS4Apqcfb+kn1bBrJXwuArhKugjkZ0UZldgY1Iaj/bl4Xq4VwBXnFUgqVvO9yFFQin0kWlbogUpOyUgdAQt0H5OKwh3KMQCEJKGEyqZLhKrQSoorzQjZuQaJIhjKJvOwl3FSF1ZIvzJon2vNicU/af36SjwnRAJztfr4F4KCItVDCdZHEugI00ErjCIq2F9mhOogUVOV3MQZJGQKlJeyInKTwvHEUHjs+Nwz+NpsR/lfT6zHe9KLLyIV9pNYkHEKsxkyq/S/s7Xo9ZYoI1JgviMr5jmR1Ifhy4WJulsCmWGyE9TbREyXUEi8XS9XVmoWLirl8V/tfILX7FcxPO46LifcHSlr5SvCE62WEpXBtOkVsfwJTGXma27CMtF/dfKyoCkQJN7L5oMkbJ6Mlbo6B1n5G0VFD3kGvZYyhU1Dlft0jmz3WtybjVeWM2iqLaVJH5XCBWFz+qLxrJSGqHrvCJHaRglHuMUUqY7q5BrqxkWFQ20oiZHdcOPpK2z1yeIRYG/nO7oUyEW0u3G6HiM0A0tb7EEUr5MaEAHKSS+0SD9jQQpZ6o3N9WC5SRkUSEUpAzGJuO4sniSlJeUoOOf7LHnJpyUbVcVlVBwFvg7hwVWwc3/G6nyJH1OJk1cEaFqfmCS9V6FCIkFObp3hXxQ0L6ZylEJ5EqhWrIVsesvGtCm1nHFot/ZRcHpbxJIMri1cKQYT0KMpA5vWkiIQoR0LZn7bYaUmN0QhEDeZMss6XyCjJaFT85N5bGyNCx1g1CbHxFSPsKS/lXPeuZ5Pvvm0IdLdzapdhrdb5kUdV21nWxSUSuBxRSiyZADtNZiwuLRbJSkXH3iBozkgZIitJqctLbOCyELd+/hNvNIUoIEWJ7qXmdJObx0g5AK5EwhZFIFme4KQ6EQZTllJkQSv1LxbxlISXxrWgcz8fu1QOa/PUv5ZN+e/buyzUveb4+lnNmgji61TyvvJkHvymLGJBjq4CCFT+RZtFYlDTxXGWBqmQibmRZcjZlAgEJU7D8F73o44X5ovlQ5YSYT80w0Sro+K10lkLCFdMOShP2b1dhpelSlHIIKwk/7mK7cp7CdXuMg7MwmMY3WNKGzfEZLnMk4Pioj9sgr3Z+r8E9iKV+g5qIaIWWnKOykJasrVaEqeyok6VV08w+6sUiihWl/piwmZTeTkoDO0lV3OeqhbFN3iWwK+u49Z0iTGYfzzApcZznvK+9bgZt0Il7dt+2iNhA/7UghrCiKW9k96sP5/wgwACjIbQMApnO0AAAAAElFTkSuQmCC);
  width: 220rpx;
  height: 50rpx;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 220rpx 50rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 50rpx;
  color: #fff;
  font-size: 22rpx;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧 */

.yhli_r {
  width: 425rpx;
}

.yhli_r_titel {
  height: 32rpx;
}

.yhli_r_titel_l {
  height: 32rpx;
}

.yhli_r_titel_l {
  font-size: 22rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  padding: 0 10rpx;
  border-radius: 4rpx;
  -webkit-border-radius: 4rpx;
  -moz-border-radius: 4rxp;
}

.yhli_r_titel_r {
  height: 32rpx;
  line-height: 32rpx;
  font-size: 32rpx;
  color: #212121;
  margin-left: 14rpx;
  max-width: 320rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 价格 */

.yhli_r_price {
  margin-top: 10rpx;
  height: 44rpx;
}

.yhli_r_price_l {
  font-size: 22rpx;
  margin-right: 20rpx;
  margin-top: 7rpx;
}

.yhli_r_price_r {
  font-size: 30rpx;
  color: #fe4354;
  font-weight: bold;
}

.yhli_r_price_r text {
  font-size: 24rpx;
  font-weight: normal;
}

.f24 {
  font-size: 24rpx;
}

.bold {
  font-weight: bold;
}
/* 摇号列表 */

.yhul {
  width: 670rpx;
  margin: 0 auto;
}
.yhli_r_tz {
  color: #222;
  height: 24rpx;
  line-height: 24rpx;
  margin-top: 10rpx;
}

.mr20 {
  margin-right: 20rpx;
}

.yhli_dj {
  font-size: 22rpx;
  color: #222;
  height: 22rpx;
  line-height: 22rpx;
  margin-top: 22rpx;
}

/* 登记中,公示中 */

.yhli_orange {
  color: #ff8e67;
  background-color: #ffeeda;
}

/* 待摇号,无需摇号*/

.yhli_blue {
  color: #5faeff;
  background-color: #dff0ff;
}

/* 已摇号，已开盘 */

.yhli_green {
  color: #41c28e;
  background-color: #d9f3e8;
}

/* 弹性盒子 */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap:wrap;
}

.flexSb {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
}

3.需要的文件夹8.wxml

<import src="../template/color.wxml" />

<view>
  <template is="lplist" data='{{lpListItem}}' />
</view>

4.需要的文件夹8.wxss

@import "../template/color.wxss";

5.需要的文件夹8.js

var that;
var arrdataIndex;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    lpListItem: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that = this;
    //当前页码
    arrdataIndex = 0;
    //原始数据
    var arrobj = [{
      address: "",
      averageprice: "上海",
      cover_pic: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg",
      distname: "我是底部蒙层",
      housenum: "1",
      name: "我是小龙虾",
      opentime: "开盘时间",
      registertime: "个大肥美",
      statusname: "有货",
      winrate: "优等",
    }];

    //循环生成5个
    for (var i = 1; i < 5; i++) {
      
      //函数自执行
      (function(i) {
        //对象身拷贝
        arrobj[i] = JSON.parse(JSON.stringify(arrobj[0]));
        arrobj[i].cover_pic = "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/" + (i+1) + ".jpg";
        arrobj[i].housenum = i + 1;

      })(i)
    }

    //获取第一页的数据
    var lpListItemArr = "lpListItem[" + arrdataIndex + "]";
    //赋值
    that.setData({
      [lpListItemArr]: arrobj
    });
  },

  onShow: function() {

  },
  //触底事件，加载第二页数据
  onReachBottom: function() {

    //一共只有两页数据，没有更多了了
    if (arrdataIndex == 1) {
      return false;
    }

    //加载loading
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 2000
    });

    setTimeout(function() {
      
      //原始数据
      var arrobj = [{
        address: "",
        averageprice: "杭州",
        cover_pic: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201707/jiaoben5247/image/1.jpg",
        distname: "我是底部蒙层",
        housenum: "1",
        name: "我是帅气的龙虾",
        opentime: "开盘时间",
        registertime: "个大肥美",
        statusname: "有货",
        winrate: "优等",
      }]

      for (var i = 1; i < 5; i++) {
        (function (i) {
          arrobj[i] = JSON.parse(JSON.stringify(arrobj[0]));
          arrobj[i].cover_pic = "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201707/jiaoben5247/image/" + i + ".jpg";
          arrobj[i].housenum = i + 1;
          console.log(i)
        })(i)
      }

      //当前页码
      arrdataIndex = 1;
      // 按需加载
      var lpListItemArr = "lpListItem[" + arrdataIndex + "]";

      that.setData({
        [lpListItemArr]: arrobj
      });
      //加载完成隐藏loading
      wx.hideLoading();

    }, 2000)
  },
})

6.效果（一页加载为两页）

小程序template模板的使用，写好wxml和wxss，在别的页面引用

猜你喜欢