轮播图

README.md

@@ -66,6 +66,8 @@
 
 ​	My_liveAccountMsg -- 直播账号信息展示
 
+​	My_BannerSwiper -- banner轮播
+
 # 缓存
 
 ​	userData -- 用户基本数据 -- 保存数据：index-用户列表下标，token，fisadministrator--是否主账号，tagentsid，tenterpriseid，userid

app.json

@@ -63,7 +63,8 @@
         "van-transition": "@vant/weapp/transition/index",
         "My_DisplayBox": "/components/My_DisplayBox/index",
         "My_VerticalBox": "/components/My_VerticalBox/index",
-        "My_NavTabs": "/components/My_NavTabs/index"
+        "My_NavTabs": "/components/My_NavTabs/index",
+        "My_BannerSwiper": "/components/My_BannerSwiper/index"
     },
     "window": {
         "backgroundTextStyle": "light",

components/My_BannerSwiper/index.js

@@ -0,0 +1,31 @@
+// components/My_BannerSwiper/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        swiperBannerList: {
+            type: Array
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /* 轮播跳转 */
+        clickToPage(e) {
+            const {
+                url
+            } = e.target.dataset;
+            console.log(url)
+        }
+    }
+})

components/My_BannerSwiper/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/My_BannerSwiper/index.wxml

@@ -0,0 +1,10 @@
+<!-- banner -->
+<view class="supplyAndDemandBanner">
+    <view class="swiperBanner">
+        <swiper autoplay indicator-dots circular="true" indicator-active-color="#fff">
+            <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
+                <image src="{{item.attinfos[0].fobsurl}}" data-url="{{item.fhyperlink}}" catchtap="clickToPage" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+</view>

components/My_BannerSwiper/index.wxss

@@ -0,0 +1,22 @@
+/* banner */
+.supplyAndDemandBanner {
+    width: 100vw;
+    height: 306rpx;
+    background-color: #FFFFFF;
+    padding-top: 20rpx;
+}
+
+.swiperBanner {
+    width: 702rpx;
+    height: 286rpx;
+    margin: 0 auto;
+    border-radius: 10rpx;
+    overflow: hidden;
+    transform: translateY(0);
+}
+
+.swiperBanner swiper-item,
+.swiperBanner image {
+    width: 702rpx;
+    height: 286rpx;
+}

pages/tabbar-pages/home/index.wxml

@@ -1,13 +1,7 @@
 <!-- 自定义头部 -->
 <My_navBar></My_navBar>
-<!-- banner -->
-<view class="homeBanner">
-    <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
-        <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
-            <image src="{{item.attinfos[0].fobsurl}}" mode="aspectFill"></image>
-        </swiper-item>
-    </swiper>
-</view>
+<!-- 轮播图 -->
+<My_BannerSwiper swiperBannerList="{{swiperBannerList}}"></My_BannerSwiper>
 <!-- 宫格区域 -->
 <view class="grid_box">
     <van-grid border="{{false}}" column-num="4" bindtap="gridJumpPage">

pages/tabbar-pages/home/index.wxss

@@ -1,25 +1,3 @@
-/* banner */
-.homeBanner {
-    width: 100vw;
-    height: 306rpx;
-    background-color: #FFFFFF;
-}
-
-.swiperBanner {
-    width: 702rpx;
-    height: 286rpx;
-    padding-top: 20rpx;
-    margin: 0 auto;
-    overflow: hidden;
-}
-
-.swiperBanner swiper-item,
-.swiperBanner image {
-    width: 100%;
-    height: 100%;
-    border-radius: 10rpx;
-}
-
 /* 宫格 */
 .grid_box {
     width: 100vw;

pages/tabbar-pages/supplyAndDemand/index.js

@@ -20,19 +20,7 @@ Page({
         /* 供需列表 */
         productList: [],
         //轮播图列表
-        swiperBannerList: [{
-            id: "001",
-            url: "/static/userImage.png",
-            src: ''
-        }, {
-            id: "002",
-            url: "/static/userImage.png",
-            src: ''
-        }, {
-            id: "003",
-            url: "/static/userImage.png",
-            src: ''
-        }],
+        swiperBannerList: [],
     },
 
     /**
@@ -50,7 +38,12 @@ Page({
             this.setData({
                 ftypeList: res.data
             })
-        })
+        });
+        /* 获取轮播图 */
+        const bannerList = getApp().globalData.bannerDataList.filter(value => value.flocation == 'supplyanddemand_head');
+        this.setData({
+            swiperBannerList: bannerList[0].banner
+        });
     },
     /* tabs切换接口 */
     getList() {

pages/tabbar-pages/supplyAndDemand/index.wxml

@@ -1,13 +1,7 @@
 <!-- 自定义头部 -->
 <My_navBar></My_navBar>
-<!-- banner -->
-<view class="supplyAndDemandBanner">
-    <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
-        <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
-            <image src="{{item.url}}" mode="aspectFill"></image>
-        </swiper-item>
-    </swiper>
-</view>
+<!-- 轮播图 -->
+<My_BannerSwiper swiperBannerList="{{swiperBannerList}}"></My_BannerSwiper>
 <!-- tabs切换栏 -->
 <view class="tabs_box">
     <van-tabs active="{{ active }}" bind:change="tabsChange" custom-class="tabs-custom-class" tab-active-class="tabs-active-class" ellipsis="{{false}}" line-width="30px" color="#4DC2D4" title-active-color="#4DC2D4" swipeable>

pages/tabbar-pages/supplyAndDemand/index.wxss

@@ -1,24 +1,3 @@
-/* banner */
-.supplyAndDemandBanner {
-    width: 100vw;
-    height: 306rpx;
-    background-color: #FFFFFF;
-}
-
-.swiperBanner {
-    width: 702rpx;
-    height: 286rpx;
-    padding-top: 20rpx;
-    margin: 0 auto;
-}
-
-.swiperBanner swiper-item,
-.swiperBanner image {
-    width: 100%;
-    height: 100%;
-    border-radius: 15rpx;
-}
-
 /* 我的需求搜索框 */
 .my-need-search {
     display: flex;
@@ -240,7 +219,7 @@
 
 
 /* 沟通列表 */
-.CommunicationOfNumber{
+.CommunicationOfNumber {
     padding-bottom: 30rpx;
 }
 

pages/tradeShow/index.js

@@ -6,26 +6,18 @@ Page({
      */
     data: {
         //轮播图列表
-        swiperBannerList: [{
-            id: "001",
-            url: "/static/changeImg.png",
-            src: ''
-        }, {
-            id: "002",
-            url: "/static/changeImg.png",
-            src: ''
-        }, {
-            id: "003",
-            url: "/static/changeImg.png",
-            src: ''
-        }],
+        swiperBannerList: [],
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-
+        /* 获取轮播图 */
+        const bannerList = getApp().globalData.bannerDataList.filter(value => value.flocation == 'activity_head');
+        this.setData({
+            swiperBannerList: bannerList[0].banner
+        });
     },
 
     /**

pages/tradeShow/index.wxml

@@ -1,11 +1,5 @@
-<!-- banner -->
-<view class="homeBanner">
-    <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
-        <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
-            <image src="{{item.url}}" mode="aspectFill"></image>
-        </swiper-item>
-    </swiper>
-</view>
+<!-- 轮播图 -->
+<My_BannerSwiper swiperBannerList="{{swiperBannerList}}"></My_BannerSwiper>
 
 <!-- 数据展示 -->
 <view class="data-display">

pages/tradeShow/index.wxss

@@ -1,25 +1,3 @@
-/* banner */
-.homeBanner {
-    width: 100vw;
-    height: 306rpx;
-    background-color: #FFFFFF;
-}
-
-.swiperBanner {
-    width: 702rpx;
-    height: 286rpx;
-    padding-top: 20rpx;
-    margin: 0 auto;
-    border-radius: 10rpx;
-    overflow: hidden;
-}
-
-.swiperBanner swiper-item,
-.swiperBanner image {
-    width: 100%;
-    height: 100%;
-}
-
 /* 数据展示 */
 .data-display {
     display: flex;