小白之微信小程序第一次完成搭建本地服务与页面进行交互

如果忘记了搭建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 }

 

效果图

技术分享图片

 

相关文章