如果忘记了搭建json-server的过程，可看上一篇随笔
1. index.xml 代码
1 <!--index.wxml--> 2 <swiper indicator-dots="{{indicatorDots}}" indicator-dots="true" 3 autoplay="{{autoplay}}" autoplay="true" interval="{{interval}}" duration="{{duration}}"> 4 <block wx:for="{{imgUrls}}" wx:key=""> 5 <swiper-item> 6 <image src="{{item}}" class="slide-image"/> 7 </swiper-item> 8 </block> 9 </swiper>10 <view class=‘pro-list‘>11 <view class=‘pro-item‘ wx:for="{{ proList}}" wx:key="" bindtap=‘toDetail‘ data-index="{{index}}"> 12 <image class=‘pro-logo‘ src="{{item.img}}"></image>13 <view class=‘pro-body‘>14 <view class=‘pro-title‘>{{item.title}}</view>15 <text class=‘pro-desc‘>{{item.desc}}</text>16 <view class=‘pro-footer‘> 17 <image class="btn-detial" src="/images/btn_detail.png"></image>18 <button class="btn-ask" open-type="contact">
<image class=‘btn-img‘ src="/images/btn_ask.png"/>
</button>20 </view>21 </view>22 </view>23 </view>
2.index.wxss
1 /**index.wxss**/ 2 swiper{ 3 width:100%; 4 height:340rpx; 5 } 6 .slide-image{ 7 display: block; 8 width:100%; 9 height:100%;10 }11 .pro-list{12 width: 100%;13 height:auto;14 }15 .pro-item{16 padding:30rpx;17 overflow: hidden;18 }19 .pro-logo{20 width:190rpx;21 height:190rpx;22 float: left;23 }24 .pro-body{25 margin-left:213rpx;26 }27 .pro-title{28 color:#212121;29 font-size: 34rpx;30 line-height: 1;31 }32 .pro-desc{33 font-size: 24rpx;34 color:#9a9a0a;35 line-height:1.2;36 }37 .pro-footer{38 overflow: hidden;39 40 }41 .btn-detial{42 float: left;43 width:170rpx;44 height:52rpx;45 }46 .btn-ask{47 padding:0;48 float:left;49 width:224rpx;50 height:52rpx;51 margin-left:20rpx;52 line-height: 1;53 }54 .btn-img{55 width:100%;56 height:100%;57 }
3.index.js
//index.js//获取应用实例const app = getApp()Page({ data: { imgUrls: [ ‘/images/swiper01.jpg‘, ‘/images/swiper02.jpg‘, ‘/images/swiper03.jpg‘ ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, proList: null, }, //事件处理函数 toDetail: function (e) { console.log(e); var index = e.currentTarget.dataset.index; console.log(index); }, getProList:function(){ var self = this; wx.request({ url: ‘http://127.0.0.1:3000/data‘, method: ‘GET‘, success: function (res) { console.log(res); self.setData({ proList: res.data, }) } }); }, onLoad: function () { this.getProList(); }})4. index.json (此json不是在项目里的index.json内写的，而是自己找个文件夹放置，然后json-sever index.json打开的，不明白可看上篇随笔)
1 { 2 "data": [ 3 { 4 "img": "/images/pro_01.jpg", 5 "title": "test", 6 "desc": "这是个测试1" 7 }, 8 { 9 "img": "/images/pro_02.jpg",10 "title": "test",11 "desc": "这是个测试2"12 },13 {14 "img": "/images/pro_03.jpg",15 "title": "test",16 "desc": "这是个测试3"17 },18 {19 "img": "/images/pro_01.jpg",20 "title": "test",21 "desc": "这是个测试4"22 }23 ]24 }
效果图
