1.

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

2.

2.template里的color.wxml

templatename"lplist"!--根据自己需要，如果只有一层需要循环的数据，这里就一层循环即可--!--如果有数据两层，这里就写两层循环--blockwx:for"{{lpListItem}}"wx:for-item"list"wx:for-index"outerIndex"wx:key"outerIndex"blockwx:for"{{list}}"wx:for-item"item"wx:for-index"innerIndex"wx:key"innerIndex"viewclass'yhul'viewclass''navigatorurl"/pages/lpdetail/lpdetail?id{{item.id}}"open-type"navigate"class'yhliflexflexSb'viewclass'yhli_l'viewclass'yhli_l_pic'imagesrc'{{item.cover_pic}}'/image/viewviewclass'yhli_l_msg'{{item.distname}}/view/viewviewclass'yhli_r'!--title--viewclass'flexyhli_r_titlealignC'!--1：标签--viewclass'yhli_r_titel_lyhli_orange'{{item.statusname}}/viewviewclass'yhli_r_titel_r'{{item.name}}/view/view!--price--viewclass'yhli_r_priceflex'viewclass'yhli_r_price_l'产地/viewviewclass'yhli_r_price_r'{{item.averageprice}}!--text元/㎡/text--/view/view!--套数中签率--viewclass'yhli_r_tzflexflexSbf24'viewclass'yhli_r_tz_lflexflexSb'viewclass'mr20'数量/viewviewtextclass'bold'{{item.housenum}}/text!--套--/view/viewviewclass'yhli_r_tz_rflexflexSb'viewclass'mr20'等级/viewviewtextclass'bold'{{item.winrate}}/text/view/view/view!--登记时间--viewclass'yhli_djflex'viewclass'mr20'说明/viewview{{item.registertime}}/view/view/view/navigator/view/view/block/block/template3.

3.template里的color.wxss

.yhli{padding:40rpx0;border-top:1pxsolid#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_limage{width:100%;height:100%;}.yhli_l_msg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAyCAYAAAA3FLVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyMzBCMjc4ODk2NzExRTg4MkIwRUUwNEY2RTMxMDZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyMzBCMjc5ODk2NzExRTg4MkIwRUUwNEY2RTMxMDZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzIzMEIyNzY4OTY3MTFFODgyQjBFRTA0RjZFMzEwNkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzIzMEIyNzc4OTY3MTFFODgyQjBFRTA0RjZFMzEwNkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66yGjkAAAJaUlEQVR42uyd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);width:220rpx;height:50rpx;background-repeat:no-repeat;background-position:center;background-size:220rpx50rpx;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:010rpx;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:010rpx;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_rtext{font-size:24rpx;font-weight:normal;}.f24{font-size:24rpx;}.bold{font-weight:bold;}/*摇号列表*/.yhul{width:670rpx;margin:0auto;}.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;}4.

3.需要的文件夹8.wxml

importsrc"../template/color.wxml"/viewtemplateis"lplist"data'{{lpListItem}}'//view5.

4.需要的文件夹8.wxss

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

5.需要的文件夹8.js

varthat;vararrdataIndex;Page({/***页面的初始数据*/data:{lpListItem:[],},/***生命周期函数--监听页面加载*/onLoad:function(options){thatthis;//当前页码arrdataIndex0;//原始数据vararrobj[{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(vari1;i5;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].housenumi+1;})(i)}//获取第一页的数据varlpListItemArr"lpListItem["+arrdataIndex+"]";//赋值that.setData({[lpListItemArr]:arrobj});},onShow:function(){},//触底事件，加载第二页数据onReachBottom:function(){//一共只有两页数据，没有更多了了if(arrdataIndex1){returnfalse;}//加载loadingwx.showToast({title:'加载中',icon:'loading',duration:2000});setTimeout(function(){//原始数据vararrobj[{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(vari1;i5;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].housenumi+1;console.log(i)})(i)}//当前页码arrdataIndex1;//按需加载varlpListItemArr"lpListItem["+arrdataIndex+"]";that.setData({[lpListItemArr]:arrobj});//加载完成隐藏loadingwx.hideLoading();},2000)},})7.

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