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

淩亂°似流年 2021-09-16 05:40 299阅读 0赞

## 轮播广告与导航部分 ##

### 轮播广告 ###

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

布局分析：

（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)；

（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是定义的返回数据的函数。