微信小程序学习笔记（2）-轮播广告&导航部分&上拉加载

轮播广告与导航部分

轮播广告

在微信小程序中，我们通常需要遇到轮播广告的需求，在实现的时候，我们使用swiper组件。

    <view class='swiper'>
      <swiper interval="{{interval}}" duration="{{duration}}" vertical="{{vertical}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" indicator-active-color="{{indicatorActiveColor}}">
        <block wx:for-items="{{banner_url}}" wx:key="this">
          <swiper-item>
            <block wx:if="{{item}}">
              <image src="{{item}}"></image>
            </block>
            <block wx:else>
              <image src="../../images/default_pic.png"></image>
            </block>
          </swiper-item>
        </block>
      </swiper>
    </view>

布局分析：

（1）首先，在使用swiper的时候，必须使用外层容器 <view class='swiper'></view> 包裹；

（2）然后，再使用swiper组件，swiper组件常用的属性有：

interval => 自动切换时间间隔，默认5000毫秒；

duration => 滑动动画时长，默认500毫秒；

vertical => 滑动方向是否为纵向，默认为false；

indicator-dots => 是否显示面板指示点，默认为false；

autoplay => 是否自动切换，默认为false；

indicator-active-color => 面板指示点当前选中的指示点颜色，默认值为#000000；

indicator-color => 指示点颜色，默认值为rgba(0, 0, 0, .3)；

扫描二维码关注公众号，回复： 3053334 查看本文章

（3）swiper组件中，循环的主体是 <swiper-item></swiper-item> 需要使用 <block></block> 包裹，并且必须设置 wx:key = "this" ;

备注：<block></block> 标签用于包裹循环体，没有实际的作用；另外，对于 <image></image> 标签的 src 属性绑定，同样需要 {{}} ，这一点不同于vue；

轮播广告组件对应的样式：

/* 轮播图样式 */

.swiper {
  width: 100%;
  margin: 0;
}

.swiper image {
  display: inline-block;
  width: 100%;
  height: 380px;
}

导航部分

实现数据的分类，通常需要有导航部分；

    <!-- 导航栏 -->
    <view class='nav_top'>
      <block wx:for="{{navTopItems}}" wx:key="this">
        <view class='nav_top_item {{curNavId==item.id?"active_"+colors[index]:""}}' data-id='{{item.id}}' data-index="{{index}}" bindtap='switchTap'>
          <image src="{{item.icon}}"></image>
          <text>{{item.title}}</text>
        </view>
      </block>
    </view>

布局分析：

（1）根据需求分析，在点击不同的分类时，文字的颜色也做相应的变化。实现这种变化，我们可以通过添加对应的 class 名来实现；

（2）其中，每一项的自定义属性 id 不同，都对应的数组的的 index 下标，即为不同的 class 名，我们设置 css 样式即可；

（3）{{curNavId==item.id?"active_"+colors[index]:"" 用于匹配对应的 class 属性，实现（1）的需求；

（4）对于自定义 data- 属性，在点击时，事件对象都会增加一个对应的属性，可以通过 e.currentTarget.dataset.index （index 就是自定的属性）来使用。

index.wxss样式：

/* 导航栏样式 */

.nav_top {
  width: 100%;
  display: flex;
  /* 横向排列 */
  flex-direction: row;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 20px 10px;
  color: #fff;
  background: #000;
}

.nav_top_item {
  width: 100rpx;
  font-size: 28rpx;
  text-align: center;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.nav_top_item image {
  width: 83rpx;
  height: 93rpx;
  display: inline-block;
}

.active_red {
  color: #e5004f;
}

.active_orange {
  color: #eb6100;
}

.active_yellow {
  color: #fff100;
}

.active_green {
  color: #8fc31f;
}

.active_purple {
  color: #aa2adf;
}

index.js文件

// 获取应用实例
var app = getApp();
// 引入数据文件
var fileData = require("../../utils/data.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    banner_url: fileData.getBannerData(),
    interval: 3000,
    duration: 1000,
    vertical: false,
    indicatordots: true,
    autoplay: true,
    indicatorActiveColor: "#ff0000",
    navTopItems: fileData.getIndexNavData(),
    colors: ["red", "orange", "yellow", "green", "purple"],
    curNavId: 1,
    curIndex: 0,
    navSectionItems: fileData.getIndexNavSectionData()
  },
  //导航栏字体颜色切换
  switchTap: function(e) {
    console.log(e);
    console.log(e.currentTarget.dataset.index);
    let id = e.currentTarget.dataset.id;
    let index = e.currentTarget.dataset.index
    this.setData({
      curNavId: id,
      curIndex: index
    })
  },
  // 页面加载完成执行
  onLoad: function(options) {
    console.log(this.data.navTopItems);
    console.log(this.data.navSectionItems);
    // 加载弹框
    wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 8000,
      mask: true
    })
    setTimeout(function() {
      wx.hideToast();
    }, 2000)
    // 通过this.setData将数据传到结构层
    this.setData({
      list: this.data.navSectionItems
    })
    console.log(this.list)
  },
  // 上拉加载更多
  loadMore: function(res) {
    console.log("已经到底了");
    var curId = this.data.curIndex;
    if (this.data.navSectionItems[curId] == 0) {
      return
    } else {
      wx.showToast({
        title: '加载中...',
        icon: 'loading',
        duration: 2000
      })
      // 加载一次之后，数据10条；加载第二次之后，数据20条；依次类推；
      var that = this;
      that.data.navSectionItems[curId] = that.data.navSectionItems[curId].concat(that.data.navSectionItems[curId]);
      that.setData({
        list: that.data.navSectionItems
      })
    }
  }
})

备注：

（1）通常，我们都把数据放置在 util 文件夹下的 data.js 中，在使用的时候，我们首先通过 var app = getApp(); 获取应用实例，并且引入数据文件 var fileData = require("../../utils/data.js");

（2）对于页面加载的菊花效果，需要使用 wx.showToast 来实现；同时，利用延迟计时器配合 wx.hideToast 来实现菊花效果的隐藏；

（3）<scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore"></scroll-view> 中的 bindscrolltolower 绑定 loadMore 函数来实现上拉加载更多效果；

data.js数据文件

// 轮播图数据
function getBannerData() {
  var bannerImages = [
    'http://ojk4698oq.bkt.clouddn.com/banner_01.png',
    'http://ojk4698oq.bkt.clouddn.com/banner_02.png',
    'http://ojk4698oq.bkt.clouddn.com/banner_03.png',
    'http://ojk4698oq.bkt.clouddn.com/banner_04.png'
  ];
  return bannerImages;
}
// 导航栏数据
function getIndexNavData() {
  var navItems = [{
      id: 1,
      icon: '../../images/nav_icon_01.png',
      title: '推存'
    },
    {
      id: 2,
      icon: '../../images/nav_icon_02.png',
      title: '美甲'
    },
    {
      id: 3,
      icon: '../../images/nav_icon_03.png',
      title: '美容'
    },
    {
      id: 4,
      icon: '../../images/nav_icon_04.png',
      title: '美发'
    },
    {
      id: 5,
      icon: '../../images/nav_icon_05.png',
      title: '美睫'
    }
  ];
  return navItems;
}
// list列表
function getIndexNavSectionData() {
  var arr = [
    [{
        subject: "睫毛稀疏 种睫毛来帮忙",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
        price: "￥100",
        message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'
      },

      {

        subject: "爱丽克EircParisSalon",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
        price: "￥1150",
        message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'

      },

      {

        subject: "伊本造型",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_04.png",
        price: "￥1047",
        message: '伊本造型是由著名形象设计师杨进先生创办。'

      },
      {

        subject: "秋季自然特价美甲",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
        price: "￥187",
        message: '我们最求得是没有最长的时间特价'

      },

      {

        subject: "画对了妆，微微一笑颜值倍儿高！",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_05.png",
        price: "￥87",
        message: '《微微一笑很倾城》的剧照简直美腻到不要不要的'

      }

    ],
    [{

        subject: "秋季自然特价美甲",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
        price: "￥187",
        message: '我们最求得是没有最长的时间特价'

      },

      {

        subject: "睫毛稀疏 种睫毛来帮忙",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
        price: "￥100",
        message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'

      },

      {

        subject: "爱丽克EircParisSalon",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
        price: "￥1150",
        message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'

      },
      {

        subject: "画对了妆，微微一笑颜值倍儿高！",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_05.png",
        price: "￥87",
        message: '《微微一笑很倾城》的剧照简直美腻到不要不要的'

      }


    ],
    [{

        subject: "秋季自然特价美甲",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
        price: "￥187",
        message: '我们最求得是没有最长的时间特价'

      },

      {

        subject: "睫毛稀疏 种睫毛来帮忙",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
        price: "￥100",
        message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'

      },

      {

        subject: "爱丽克EircParisSalon",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_03.png",
        price: "￥1150",
        message: '的PaaS云服务.七牛存储 七牛云为企业提供对象存储服'

      }

    ],
    [{

        subject: "秋季自然特价美甲",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_01.png",
        price: "￥187",
        message: '我们最求得是没有最长的时间特价'

      },

      {

        subject: "睫毛稀疏 种睫毛来帮忙",
        civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
        price: "￥100",
        message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'

      }

    ],
    [{

      subject: "睫毛稀疏 种睫毛来帮忙",
      civerpath: "http://ojk4698oq.bkt.clouddn.com/recommend_img_02.png",
      price: "￥100",
      message: '先的企业级云服务商,致力于打造以数据为核心的场景化 PaaS服务'

    }]

  ]
  return arr
}
// 导出
module.exports = {
  getBannerData,
  getIndexNavData,
  getIndexNavSectionData
}

备注：

（1）每一组数据都是可以通过定义一个函数来实现，在函数中定义一个数组，并且返回；

（2）注意：必须导出才可以在其他文件中引入并使用。导出的方式如下：

module.exports = {
  getBannerData,
  getIndexNavData,
  getIndexNavSectionData
}

其中，getBannerData、getIndexNavData、getIndexNavSectionData是定义的返回数据的函数。