feature: 优化首页

pages/index/index.js

@@ -18,12 +18,23 @@ Page({
 
 
   data: {
-    banner: [{
-      "image": "",
-      "image": "",
-      "image": "",
-    }, ],
+    bannerList: [{
+        imgUrl: 'http://img1.baidu.com/it/u=2343623234,438083234&fm=253&app=138&f=JPEG?w=684&h=1216'
+      },
+      {
+        imgUrl: 'http://img1.baidu.com/it/u=2343623234,438083234&fm=253&app=138&f=JPEG?w=684&h=1216'
+      },
+      {
+        imgUrl: 'http://img1.baidu.com/it/u=2343623234,438083234&fm=253&app=138&f=JPEG?w=684&h=1216'
+      }
+      // 添加更多图片对象
+    ],
+    autoplay: true,
+    interval: 3000, // 切换时间间隔
+    duration: 500, // 滑动动画时长
+    circular: true, // 衔接滑动
     indexPage: 0,
+    ///是否展示频道
     showChannel: false,
     ////首页
     navBarHeight: app.globalData.navBarHeight,
@@ -257,7 +268,7 @@ Page({
 
   // 回调
   mqttCallback(type, option) {
-    console.log("gadsfadsfqwerq===" + type + "===" + option);
+    // console.log("gadsfadsfqwerq===" + type + "===" + option);
     let payloads = null;
     if (option) {
       payloads = JSON.parse(option.payload);

pages/index/index.wxml

@@ -6,16 +6,25 @@
 <view class="container">
   <view wx:if="{{indexPage==0}}" class="mair" style="height: calc(100vh - 140rpx - {{navBarHeight}}px);">
 
-    <view style="font-size: 28rpx;">下午好，Demon</view>
+    <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">下午好，Demon</view>
 
     <!-- banner-->
-    <swiper wx:if="{{banner.length>0}}" class="banner_container" indicator-dots="{{banner.length>1}}" autoplay="true" interval="2000" duration="500" circular="true">
+    <view class="banner_container">
+      <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
+        <block wx:for="{{bannerList}}" wx:key="index">
+          <swiper-item>
+            <image class="swiper_image" src="{{item.imgUrl}}" />
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <!-- <swiper wx:if="{{banner.length>0}}" class="banner_container" indicator-dots="{{banner.length>1}}" autoplay="true" interval="2000" duration="500" circular="true">
       <block wx:for="{{banner}}" wx:key="index">
         <swiper-item>
           <image class="banner_item" src="{{item.image}}" mode="aspectFill" bindtap="clickActivity" data-item="{{item}}" lazy-load="true"></image>
         </swiper-item>
       </block>
-    </swiper>
+    </swiper> -->
 
     <view class='nav-wrap' style='height: calc({{navBarHeight}}px - {{MenuButtonTop}}px); padding-top: {{MenuButtonTop}}px;'>
       <view wx:if="{{deviceList && deviceList.length > 0 && !showLogin}}" bindtap="isShowDevicelistFun" class="nav-info" style="height: {{ MenuButtonheight }}px;">

pages/index/index.wxss

@@ -8,11 +8,6 @@
 
  /************************ 首页 ************************/
 
- /* .container {
-   display: block;
-   flex: 1;
- } */
-
  .container .nav-wrap {
    backdrop-filter: blur(10rpx);
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
@@ -46,8 +41,8 @@
  }
 
  .container .mair {
-   width: calc(100% - 52rpx);
-   padding: 20rpx 26rpx 0;
+   width: calc(100% - 64rpx);
+   padding: 20rpx 32rpx 0;
    height: calc(100vh - 20rpx);
    position: relative;
    overflow: hidden;
@@ -731,14 +726,49 @@
    height: 55rpx;
  }
 
+ /************************ banner ************************/
  .banner_container {
-   height: 270rpx;
-   width: 90%;
-   margin-top: 40rpx;
+   width: 100%;
+   height: 264rpx;
+   margin-top: 32rpx;
+   /* 根据需要调整高度 */
+   overflow: hidden;
+   position: relative;
+   border-radius: 16rpx;
+ }
+
+ .swiper {
+   width: 100%;
+   height: 264rpx;
+ }
+
+ .swiper_image {
+   width: 100%;
+   display: block;
+ }
+
+ /* 设置指示点的大小和颜色 */
+ .swiper_dot {
+   width: 10px;
+   /* 指示点的宽度 */
+   height: 10px;
+   /* 指示点的高度 */
+   background-color: rgba(21, 128, 56, 0.5);
+   /* 指示点的颜色，这里使用了半透明的白色 */
+   border-radius: 50%;
+   /* 使指示点成为圆形 */
+   margin: 0 4px;
+   /* 指示点之间的间距 */
+   display: inline-block;
+   /* 使指示点成为行内块元素 */
  }
 
- .banner_item {
-   background-color: lightgray;
-   height: 270rpx;
-   border-radius: 15rpx;
+ /* 设置当前选中指示点的样式（可选） */
+ .swiper_dot_active {
+   background-color: red;
+   /* 当前选中指示点的颜色 */
+   width: 12px;
+   /* 当前选中指示点的宽度（可以比未选中时稍大） */
+   height: 12px;
+   /* 当前选中指示点的高度（可以比未选中时稍大） */
  }