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

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

 

效果图

 

posted @ 2018-11-15 11:44  橙子不是orange  阅读(732)  评论(0)  编辑  收藏  举报