Android开发Android开发经验谈微信小程序开发

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

2018-09-09  本文已影响23人  d74f37143a31

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

Swiper 组件实现轮播图

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

<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,联系请备注

上一篇 下一篇

猜你喜欢

热点阅读