微信小程序-利用干货集中营的福利接口实现 banner 轮播图

今天在用真机调试的时候发现轮播图的图片死活显示不出来，查了一下网上的结果发现大部分是以下原因导致的：【我这里没显示的原因可能就是因为域名没备案吧，这块还没去验证。模拟器是完全可以显示的。】

• 图片是用image加载的；
• 图片的url里面没有中文；
• 图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg（建议全部为png）
• 域名已备案；
• 图片名称没有空格

Swiper 组件实现轮播图

Swiper 组件的官方介绍文档 Swiper—文档末尾有使用案例, 它的作用是 滑块视图容器，是个容器，因此容器中要显示的内容就可以有多种显示方式，可以是图片，可以是文字，可以是一个其他 view

• swiper-item 这是容器中要显示的布局
  这里我们是用于显示福利接口中前 5 张图片，所以这里swiper-item包裹的就是 image组件

• banner 布局文件如下：
  因为需要整体上下滑动，因此用了scroll-view组件。banner的实现采用了数据绑定的方式，将swiper 组件的属性交给 js脚本去控制。同时利用for 循环将列表数据渲染到页面上，这里还给图片组件image设置了一个类选择器 slide-image通过这个类选择器可以在wxss 文件中设置图片的样式

<scroll-view>
    <view>
      <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{banners}}">
          <swiper-item>
            <image src="{{item.url}}" class="slide-image" catchtap='onBannerItemClick' data-imageUrl='{{item.url}}'/>
          </swiper-item>
        </block>
      </swiper>
    </view>
</sroll-view>

设计 wxml展示图片轮播样式

这里给轮播图的高度设置为 600rpx，宽度铺满屏幕

swiper{
  width: 100%;
  height: 600rpx;
}
.slide-image{
  width: 100%;
  height: 600rpx
}

获取轮播图网络数据

布局设置好了之后就是获取数据了，这里使用 干货集中营 的数据。这里使用了封装好的网络请求加载库，详细介绍请移步—–>微信小程序~ 网络请求工具的封装

1. 引入封装好的网络工具类
    var util = require('../../utils/util.js');
2. 请求数据 
  onLoad: function (options) {
    var bannerUrl = "http://gank.io/api/data/福利/5/1";
    util.http(bannerUrl, this.processBannerData);
    // 设置标题
    wx.setNavigationBarTitle({
      title: '全部干货'
    })
  },

3. 处理轮播图数据
  processBannerData: function (gankData){
    var banners = []; 
    var results = gankData.results;
    for (var idx in results) {
      var subject = results[idx];
      var url = subject.url;
      console.log("url-1-->" + url);
      var tranUrl = url.replace("http://", "https://");
      console.log("url-2-->" + tranUrl);
      var temp = {
        desc: subject.desc,
        _id: subject._id,
        url: tranUrl
      }
      banners.push(temp)
    }
    // 将数据绑定给变量，供页面调用
    this.setData({
      banners: banners,
      indicatorDots: true,
      autoplay: true,
      interval: 2500,
      duration: 1000
    });
  },

将数据显示到界面上

布局中的变量要和处理数据中的变量一致，否则获取了数据之后页面中也显示不了数据

  <view>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{banners}}"> 
        <swiper-item>
          <image src="{{item.url}}" class="slide-image" catchtap='onBannerItemClick' data-imageUrl='{{item.url}}'/>
        </swiper-item>
      </block>
    </swiper>
  </view>

ok，banner 功能到这里了，点击后查看大图下一篇介绍。

需要源码的可以联系我
微信号：weixin1105894953，联系请备注