小程序 轮播以及tabber代码

小程序 轮播以及tabber代码

代码效果如下 方便 直接初始化项目

Tabber app.json

{
//没有image自行设定
“pages”: [
“pages/index/index”,
“pages/logs/logs”,
“pages/list/list”,
“pages/search/search”,
“pages/shop_cat/shop_cat”,
“pages/my/my”,
“pages/picker/picker”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#8A4802”,
“navigationBarTitleText”: “店铺列表”,
“navigationBarTextStyle”: “white”
},
“tabBar”: {
“selectedColor”: “#FF9933”,
“list”: [
{
“selectedIconPath”: “pages/images/home.png”,
“iconPath”: “pages/images/home1.png”,
“pagePath”: “pages/index/index”,
“text”: “首页”
},
{
“selectedIconPath”: “pages/images/2.png”,
“iconPath”: “pages/images/2.png”,
“pagePath”: “pages/list/list”,
“text”: “分类”
},
{
“selectedIconPath”: “pages/images/3.png”,
“iconPath”: “pages/images/3.png”,
“pagePath”: “pages/search/search”,
“text”: “搜索”
},
{
“selectedIconPath”: “pages/images/4.png”,
“iconPath”: “pages/images/4.png”,
“pagePath”: “pages/shop_cat/shop_cat”,
“text”: “购物车”
},
{
“selectedIconPath”: “pages/images/me.png”,
“iconPath”: “pages/images/me1.png”,
“pagePath”: “pages/my/my”,
“text”: “我的”
}
]
},
“networkTimeout”: {
“request”: 10000,
“downloadFile”: 10000
},
“permission”: {
“scope.userLocation”: {
“desc”: “你的位置信息将用于小程序位置接口的效果展示”
}
},
“sitemapLocation”: “sitemap49.json”
}

Swiper wxml

 <view class="swiper-container">
    <swiper circular="circular" class="banner-swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" mode="scaleToFill" />
        </swiper-item>
      </block>
    </swiper>
  </view>

Swiper wxss

.container{
  width: 100%;
  height: auto;
  padding: 0;
 
}

.banner-swiper 
{  
    height: 300rpx;
    background: #8A4802;
    
 }
.banner-swiper  swiper-item {
   text-align: center;
 }
.banner-swiper  swiper-item image
 {  
  width: 93%;   
  height: 100%;
  border-radius:5px;
  }
.swiper-container
{  
  width: 100%;
}
.swiper-container .swiper
{  
height: 300rpx;
}
.swiper-container .swiper .img
{  
width: 100%; 
height: 100%;
}

Swiper js

const fetch = require("../../utils/fetch.js")  //请求封装
Page({
  data: {
    //轮播图数据
    imgUrls: [],
    //nav数据
    categoryList: [],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 300,
    circular: true //无限轮播属性
    //轮播图结束
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },


    //数据请求
    fetch("index_bannerImg").then(res => {

      console.log(res.data)
      this.setData({
        imgUrls: res.data.imgUrls,
        categoryList: res.data.categoryList
      })
    }).catch()

fetch.js

module.exports = (url,data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      //请求共同路径

      url: `https://result.eolinker.com/BQBYcryaa1dc62a3bb52645b7fc83b8ff462675e32f8f4f?uri=index_bannerImg?uri=${url}`,

      success: resolve,
      fail: reject
    })
  })
}