feature：优化首页，频道，排行榜的UI

pages/home/home.js

@@ -24,7 +24,7 @@ Page({
       isNotruter: false,
       deviceList: [],
       bannerList: [],
-      isLoginWx: false,
+      showLogin: false,
       selectIndex: -1,
         }
   },
@@ -47,11 +47,78 @@ Page({
   },
   changeDeviceTap: function () {
   },
+  login() {
+    wx.login({
+      success: res => {
+        let phone = undefined;
+        try {
+          var value = wx.getStorageSync('userInfo')
+          if (value) {
+            phone = value.phone || undefined;
+          };
+        } catch (e) {
+          // Do something when catch error
+        };
+        // 请求登录
+        login({code: res.code, phone}).then((res)=> {
+
+          app.globalData.userInfo = res;
+          wx.setStorage({
+            key: "userInfo",
+            data: res
+          });
+          // 需要用授权登录
+          if((res.isNewUser && res.isNewUser === true) || !phone) {
+            _this.setData({
+              showLogin: true,
+            });
+            return;
+          };
+          // 获取设备本地数据
+          this.getDeviceData();
+
+          _this.setData({
+            showLogin: false,
+          });
+          wx.setStorage({
+            key:"token",
+            data: JSON.stringify({
+              id: res.userId,
+              token: res.accessToken,
+            }),
+          });
+        });
+      },
+    })
+  },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    _this = this;
+    // 版本自动更新代码
+    const updateManager = wx.getUpdateManager();
+    updateManager.onUpdateReady(function () {
+      _this.setData({
+        newVersion: true
+      });
+    })
+    updateManager.onUpdateFailed(function () {
+      // 新的版本下载失败
+      wx.showModal({
+        title: '已有新版本咯',
+        content: '请您删除当前小程序，重新打开呦~',
+        showCancel: false
+      })
+    })
+
+    wx.showLoading({
+      title: '加载中',
+    });
+      // 登录
+      this.login();
+
   },
 
   /**

pages/home/home.wxml

@@ -6,27 +6,28 @@
   <view class="helloC" style="margin-top: {{navBarHeight}};">下午好，昵称XXX</view>
   <swiper class="bannerC" indicator-dots="true" autoplay="3000">
     <swiper-item class="bannerItemC" wx:for="{{bannerList}}" wx:key="item">
-      <image src="{{item}}" mode="scaleToFill"/>
+      <image src="{{item}}" mode="widthFix" style="flex: 1;" />
     </swiper-item>
   </swiper>
+  <view class="device-empty-tips" >
+      + 添加设备
+    </view>
   <scroll-view class="deviceScrollClass" scroll-y="true">
     <view class="deviceClass" wx:for="{{deviceList}}" wx:key="item" >
-          <image class="deviceImg" src="../../img/g.png" mode="scaleToFill" />
+          <image class="device_img" src="../../img/g.png" mode="scaleToFill" />
           <view class="detailClass" style="flex-direction: row;">
-            <view class="powerClass">
-              <image class="powerImg" src="../../img/dl1.png" mode="scaleToFill" />
-              <view class="powerText">{{item.power}}</view>
+            <view class="power">
+              <image class="power_img" src="../../img/dl1.png" mode="scaleToFill" />
+              <text class="power_text">{{item.power}}</text>
             </view>
-            <view class="deviceName">{{item.devName}}</view>
-            <view class="deviceDeleteClass" bind:tap="deleteDeviceTap">删除</view>
+            <view class="device_name">{{item.devName}}</view>
+            <view class="device_delete" bind:tap="deleteDeviceTap">删除</view>
 
           </view>
 
-          <image class="detailPageC" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
+          <image class="detail_page" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
         </view>
-    <view class="deviceEmptyClass" wx:if="{{deviceList && deviceList.deviceList.length == 0 || !isLoginWx}}">
-      + 添加设备
-    </view>
+
     <button type="primary" bindtap="changeRole">example-改变权限</button>
 
   </scroll-view>

pages/home/home.wxss

@@ -20,6 +20,8 @@
 
 .bannerItemC {
   width: 100%;
+  height: 160rpx;
+  display: flex;
 }
 
 .deviceScrollClass {
@@ -33,16 +35,7 @@
   display: inline-flex;
 } 
 
-.deviceItemC {
-  width: 100%;
-  height: 160rpx;
-  background-color: skyblue;
-/* margin-bottom: 16rpx;
-margin-top: 16rpx; */
-
-}
-
-.deviceImg {
+.device_img {
   width: 120rpx;
   height: 120rpx;
 margin-top: 16rpx;
@@ -57,25 +50,31 @@ margin-left: 16rpx;
   flex: 1;
 }
 
-.powerClass {
+.power {
   /* width: 100rpx; */
   display: flex;
 }
 
-.powerImg {
+.power_img {
+  width: 56rpx;
+  height: 56rpx;
+}
+
+.power_text {
   width: 56rpx;
   height: 56rpx;
 }
 
-.deviceName {
+
+.devicename {
   margin-top: 4rpx;
 }
 
-.deviceDeleteClass {
+.device_delete {
   margin-bottom: 16rpx;
 }
 
-.detailPageC {
+.detail_page {
 margin-top: 16rpx;
 /* margin-left: 116rpx; */
   margin-right: 16rpx;
@@ -83,7 +82,7 @@ margin-top: 16rpx;
   height: 16rpx;
 }
 
-.deviceEmptyClass {
+.device-empty-tips {
   margin-top: 16rpx;
 
 }

pages/index/index.js

@@ -1,8 +1,8 @@
 // index.ts
 // 获取应用实例
 const app = getApp();
-const { login, listByDevice }=require('./../../utils/api.js');
-const { isCN }=require('./../../utils/util.js');
+const { login, listByDevice } = require('./../../utils/api.js');
+const { isCN } = require('./../../utils/util.js');
 let _this = null;
 const interval = null;
 Page({
@@ -12,7 +12,7 @@ Page({
     MenuButtonTop: app.globalData.MenuButtonTop,
     actionIndex: null,
     isShowDevicelist: false,
-    luoma: ["Ⅰ","Ⅱ","Ⅲ","Ⅳ","Ⅴ","Ⅵ"," Ⅶ","Ⅷ","Ⅸ","Ⅹ","Ⅺ","Ⅻ"],
+    luoma: ["Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", " Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "Ⅺ", "Ⅻ"],
     channelData: [],
     deviceList: [],
     deviceListIndex: null,
@@ -24,7 +24,7 @@ Page({
     thisDeviceMac: null,
     battery: 4, // 0≤电量<20，0格
     newVersion: false,
-    rightId:wx.getStorageSync('rightId') || 0
+    rightId: wx.getStorageSync('rightId') || 0
   },
   onShow() {
     if (typeof this.getTabBar === 'function' &&
@@ -33,20 +33,20 @@ Page({
         selected: 1
       })
     }
-    app.eventBus.on('rightChange', data =>{
-      if(data !== this.data.rightId){
+    app.eventBus.on('rightChange', data => {
+      if (data !== this.data.rightId) {
         this.setData({
           rightId: data
         })
       }
     })
 
-    if((!this.data.isOneLoading)) {
+    if ((!this.data.isOneLoading)) {
       wx.getStorage({
         key: 'userInfo',
-        fail (res) {
+        fail(res) {
           // 取消订阅
-          if(_this.data.thisDeviceMac !== null) {
+          if (_this.data.thisDeviceMac !== null) {
             app.unsubscribe(`/${_this.data.thisDeviceMac}/user/pub_response`);
           };
           _this.setData({
@@ -54,10 +54,10 @@ Page({
           });
         },
         success() {
-          if(app.globalData.newDeviceId) {
+          if (app.globalData.newDeviceId) {
             // 获取设备本地数据
             _this.getDeviceData();
-          } else if(_this.data.deviceListIndex !== null){
+          } else if (_this.data.deviceListIndex !== null) {
             // 更新
             _this.actionDevice(_this.data.deviceListIndex);
           }
@@ -65,34 +65,18 @@ Page({
       });
     };
   },
-  changeRole(){
+  changeRole() {
     app.changeUserRight()
   },
   onLoad() {
-    _this = this;
-    // 版本自动更新代码
-    const updateManager = wx.getUpdateManager();
-    updateManager.onUpdateReady(function () {
-      _this.setData({
-        newVersion: true
-      });
-    })
-    updateManager.onUpdateFailed(function () {
-      // 新的版本下载失败
-      wx.showModal({
-        title: '已有新版本咯',
-        content: '请您删除当前小程序，重新打开呦~',
-        showCancel: false
-      })
-    })
 
     wx.showLoading({
       title: '加载中',
     });
-    
-    const str = setTimeout(()=> {
+
+    const str = setTimeout(() => {
       clearTimeout(str);
-      if(_this.data.isOneLoading) {
+      if (_this.data.isOneLoading) {
         _this.setData({
           isOneLoading: false,
         });
@@ -102,15 +86,16 @@ Page({
     // 获取缓存的频道数据
     wx.getStorage({
       key: "channelData",
-      success(res){
+      success(res) {
         _this.setData({
           channelData: res.data
         })
       }
     });
 
-    // 登录
-    this.login();
+    // 获取设备本地数据
+    this.getDeviceData();
+
 
   },
   login() {
@@ -126,7 +111,7 @@ Page({
           // Do something when catch error
         };
         // 请求登录
-        login({code: res.code, phone}).then((res)=> {
+        login({ code: res.code, phone }).then((res) => {
 
           app.globalData.userInfo = res;
           wx.setStorage({
@@ -134,7 +119,7 @@ Page({
             data: res
           });
           // 需要用授权登录
-          if((res.isNewUser && res.isNewUser === true) || !phone) {
+          if ((res.isNewUser && res.isNewUser === true) || !phone) {
             _this.setData({
               showLogin: true,
             });
@@ -147,7 +132,7 @@ Page({
             showLogin: false,
           });
           wx.setStorage({
-            key:"token",
+            key: "token",
             data: JSON.stringify({
               id: res.userId,
               token: res.accessToken,
@@ -161,17 +146,17 @@ Page({
     // 获取设备数据
     wx.getStorage({
       key: 'devicelist',
-      success (res) {
+      success(res) {
         wx.hideLoading();
-        if(res.data) {
+        if (res.data) {
           const resData = JSON.parse(res.data);
           _this.setData({
             deviceList: resData
           });
           // 连接mqtt
-          if(app.globalData.client === null) {
+          if (app.globalData.client === null) {
             app.connect();
-          } else if(app.globalData.newDeviceId) {
+          } else if (app.globalData.newDeviceId) {
             _this.setData({
               actionIndex: null,
               deviceListIndex: null,
@@ -180,7 +165,7 @@ Page({
             // 监听
             let topic = `/AIrSMArT_${resData[0].name.split("BLUFI_")[1]}/status/onoffline`;
             app.subscribe(topic);
-            const Timeout = setTimeout(()=> {
+            const Timeout = setTimeout(() => {
               clearTimeout(Timeout);
               _this.actionDevice(0);
             }, 1000);
@@ -197,7 +182,7 @@ Page({
           // }
         }
       },
-      fail(e){
+      fail(e) {
         wx.hideLoading();
       }
     });
@@ -205,10 +190,10 @@ Page({
   // 回调
   mqttCallback(type, option) {
     let payloads = null;
-    if(option) {
+    if (option) {
       payloads = JSON.parse(option.payload);
     };
-    switch(type) {
+    switch (type) {
       case "connect":
         _this.connectSuccess();
         break;
@@ -217,28 +202,28 @@ Page({
         break;
       case "message":
         // 接收设备播放信息
-        if(payloads.type === "get_position" && payloads.other) {
+        if (payloads.type === "get_position" && payloads.other) {
           let actionIndex = null;
-          
-          _this.data.channelData.map((v, index)=> {
-            if(v.channelNum === payloads.other.channel) {
+
+          _this.data.channelData.map((v, index) => {
+            if (v.channelNum === payloads.other.channel) {
               actionIndex = index;
             }
           });
           _this.setData({
             actionIndex,
           });
-        } else if(payloads.type === "play" || payloads.type === "play_state") {
+        } else if (payloads.type === "play" || payloads.type === "play_state") {
 
-          if(_this.data.deviceListIndex === null) {
+          if (_this.data.deviceListIndex === null) {
             return;
           }
           // 接收设备当前播放状态
           const obj = {
             DstDeviceName: _this.getThisDeviceID()
           }
-          app.PubMsg({type: "get_position", ...obj});
-        } else if(payloads.type === "get_dev_info") {
+          app.PubMsg({ type: "get_position", ...obj });
+        } else if (payloads.type === "get_dev_info") {
           // 接收设备当前信息
           this.getchannelData(payloads.other.ProdModel);
           // 电量
@@ -249,31 +234,31 @@ Page({
           _this.setData({
             isSetWake: false,
           });
-          payloads.other.alarm.map((v)=> {
-            if(v.enable === "1"){
+          payloads.other.alarm.map((v) => {
+            if (v.enable === "1") {
               _this.setData({
                 isSetWake: true
               });
             }
           });
           // 更新信息
-          _this.data.deviceList.map((v, index)=> {
-            if(payloads.SrcDeviceName && payloads.SrcDeviceName.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
+          _this.data.deviceList.map((v, index) => {
+            if (payloads.SrcDeviceName && payloads.SrcDeviceName.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
               _this.data.deviceList[index].ProdModel = payloads.other.ProdModel;
               _this.data.deviceList[index].devName = payloads.other.devName;
             }
           });
           // 更新缓存
           wx.setStorage({
-            key:"devicelist",
+            key: "devicelist",
             data: JSON.stringify(_this.data.deviceList),
-            success(){
+            success() {
               _this.setData({
                 deviceList: _this.data.deviceList
               })
             }
           });
-        } else if(payloads.type === "battery" && payloads.other) {
+        } else if (payloads.type === "battery" && payloads.other) {
           _this.setData({
             battery: _this._battery(payloads.other.battery),
           })
@@ -286,17 +271,17 @@ Page({
   // 格式化电量
   _battery(battery) {
     let _battery = 0;
-    if(battery < 20) {
+    if (battery < 20) {
       _battery = 0
-    } else if(20 <= battery && battery < 40) {
+    } else if (20 <= battery && battery < 40) {
       _battery = 1
-    } else if(40 <= battery && battery < 60) {
+    } else if (40 <= battery && battery < 60) {
       _battery = 2
-    } else if(60 <= battery && battery < 80) {
+    } else if (60 <= battery && battery < 80) {
       _battery = 3
-    } else if(80 <= battery && battery <= 100) {
+    } else if (80 <= battery && battery <= 100) {
       _battery = 4
-    } else if(battery > 100) {
+    } else if (battery > 100) {
       _battery = 5
     };
     return _battery
@@ -307,8 +292,8 @@ Page({
   },
   online(payloads) {
     // 设置在线状态
-    _this.data.deviceList.map((v, index)=> {
-      if(payloads.uuid && payloads.uuid.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
+    _this.data.deviceList.map((v, index) => {
+      if (payloads.uuid && payloads.uuid.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
         _this.data.deviceList[index].state = payloads.state;
       }
     });
@@ -317,15 +302,15 @@ Page({
     });
     // 更新缓存
     wx.setStorage({
-      key:"devicelist",
+      key: "devicelist",
       data: JSON.stringify(_this.data.deviceList)
     });
     // 如没有选中，选中最新的
-    (()=> {
-      if(_this.data.deviceListIndex === null) {
+    (() => {
+      if (_this.data.deviceListIndex === null) {
         let itue = false;
-        _this.data.deviceList.map((v, index)=> {
-          if(v.state === "online" && !itue) {
+        _this.data.deviceList.map((v, index) => {
+          if (v.state === "online" && !itue) {
             itue = true;
             _this.actionDevice(index);
           }
@@ -334,11 +319,11 @@ Page({
       //  else {
       //   _this.actionDevice(_this.data.deviceListIndex);
       // };
-      
+
     })();
 
     // 当前播放设备离线
-    if( _this.data.deviceListIndex !== null && _this.data.deviceList[_this.data.deviceListIndex].state !== "online") {
+    if (_this.data.deviceListIndex !== null && _this.data.deviceList[_this.data.deviceListIndex].state !== "online") {
       _this.setData({
         actionIndex: null,
         deviceListIndex: null,
@@ -346,24 +331,24 @@ Page({
     };
   },
   // 订阅设备在线状态
-  subscribeDevicesStatus(){
-    this.data.deviceList.forEach((value) =>{
+  subscribeDevicesStatus() {
+    this.data.deviceList.forEach((value) => {
       let topic = `/AIrSMArT_${value.name.split("BLUFI_")[1]}/status/onoffline`;
-      app.subscribe(topic); 
+      app.subscribe(topic);
     })
   },
 
   // 订阅消息
-  subscribeCurrDevice(){
+  subscribeCurrDevice() {
     if (!(app.globalData.client && app.globalData.client.connected)) {
       console.log("未连接MQTT服务器");
-      const str = setInterval(()=> {
+      const str = setInterval(() => {
         clearInterval(str);
         _this.subscribeCurrDevice();
       }, 500);
       return;
     };
-    if(this.data.deviceList.length === 0 || this.data.deviceListIndex === null) {
+    if (this.data.deviceList.length === 0 || this.data.deviceListIndex === null) {
       return
     };
     let topic = `/AIrSMArT_${this.data.deviceList[this.data.deviceListIndex].name.split("BLUFI_")[1]}/user/pub_response`;
@@ -371,19 +356,19 @@ Page({
     const obj = {
       DstDeviceName: _this.getThisDeviceID()
     };
-    app.PubMsg({type: "get_dev_info", ...obj});
+    app.PubMsg({ type: "get_dev_info", ...obj });
   },
-  
-  isShowDevicelistFun(){
+
+  isShowDevicelistFun() {
     this.setData({
       isShowDevicelist: !_this.data.isShowDevicelist
     })
   },
   actionMusic(e) {
-    if(e.currentTarget.dataset.index === this.data.actionIndex) {
+    if (e.currentTarget.dataset.index === this.data.actionIndex) {
       return;
     };
-    if(this.data.deviceListIndex === null) {
+    if (this.data.deviceListIndex === null) {
       wx.showToast({
         title: '请选择设备',
         icon: "none"
@@ -393,7 +378,7 @@ Page({
     this.setData({
       actionIndex: e.currentTarget.dataset.index
     });
-    const other= {
+    const other = {
       "url": "",
       "media_data": "",
       "user_id": `${app.globalData.userInfo.deviceUid}`,
@@ -401,8 +386,8 @@ Page({
       "channel_id": `${this.data.channelData[e.currentTarget.dataset.index].channelNum}`,
       "order": "",
       "resource_from": "",
-      "songAlbumID":"",
-      "version":3,
+      "songAlbumID": "",
+      "version": 3,
       "is_debug": app.globalData.is_debug
     };
     app.PubMsg({
@@ -411,8 +396,8 @@ Page({
       other
     });
   },
-  actionDeviceIndex(e){
-    if(e.currentTarget.dataset.index === this.data.deviceListIndex) {
+  actionDeviceIndex(e) {
+    if (e.currentTarget.dataset.index === this.data.deviceListIndex) {
       return
     };
     this.actionDevice(e.currentTarget.dataset.index)
@@ -420,11 +405,11 @@ Page({
 
   actionDevice(index) {
     const device = this.data.deviceList[index];
-    if(device.state !== "online") {
+    if (device.state !== "online") {
       return;
     };
     // 取消订阅
-    if(this.data.thisDeviceMac !== null) {
+    if (this.data.thisDeviceMac !== null) {
       app.unsubscribe(`/${this.data.thisDeviceMac}/user/pub_response`);
     };
 
@@ -456,11 +441,11 @@ Page({
     })
   },
   getchannelData(clientType) {
-    let _this=this;
-    if(this.data.deviceListIndex === null) {
+    let _this = this;
+    if (this.data.deviceListIndex === null) {
       return;
     };
-    listByDevice({clientType}).then((res)=> {
+    listByDevice({ clientType }).then((res) => {
       _this.setData({
         channelData: res
       });
@@ -468,14 +453,14 @@ Page({
       const obj = {
         DstDeviceName: _this.getThisDeviceID()
       }
-      app.PubMsg({type: "get_position", ...obj});
+      app.PubMsg({ type: "get_position", ...obj });
       wx.setStorage({
         key: "channelData",
         data: res
       });
 
       // 有新设备
-      if(app.globalData.newDeviceId) {
+      if (app.globalData.newDeviceId) {
         app.globalData.newDeviceId = null;
         return;
         // 去掉此功能，先留着吧
@@ -512,24 +497,24 @@ Page({
 
     const id = this.data.deviceList[e.currentTarget.dataset.index].deviceId;
     let name = _this.data.deviceListIndex !== null ? this.data.deviceList[_this.data.deviceListIndex].name : null;
-    const deviceList = this.data.deviceList.filter((v,i)=> {
+    const deviceList = this.data.deviceList.filter((v, i) => {
       return id !== v.deviceId
     });
     // 取消订阅
     app.unsubscribe(`/AIrSMArT_${_this.data.deviceList[e.currentTarget.dataset.index].name.split("BLUFI_")[1]}/user/pub_response`);
 
     wx.setStorage({
-      key:"devicelist",
+      key: "devicelist",
       data: JSON.stringify(deviceList),
-      success(){
-        
+      success() {
+
         _this.setData({
           deviceList,
           thisDeviceMac: null
         });
 
         // 当前没有设备
-        if(deviceList.length === 0) {
+        if (deviceList.length === 0) {
           _this.setData({
             showDelete: false,
             actionIndex: null,
@@ -538,17 +523,17 @@ Page({
           });
         }
 
-        if(_this.data.deviceListIndex === null) {
+        if (_this.data.deviceListIndex === null) {
           return
         };
-        if(e.currentTarget.dataset.index === _this.data.deviceListIndex) {
+        if (e.currentTarget.dataset.index === _this.data.deviceListIndex) {
           let index_ = null;
-          deviceList.map((v, index)=> {
-            if(v.state === "online" && index_ === null) {
+          deviceList.map((v, index) => {
+            if (v.state === "online" && index_ === null) {
               index_ = index;
             }
           });
-          if(index_ !== null) {
+          if (index_ !== null) {
             _this.actionDevice(index_);
           } else {
             _this.setData({
@@ -557,8 +542,8 @@ Page({
             });
           };
         } else {
-          deviceList.map((v, index)=> {
-            if(v.name === name) {
+          deviceList.map((v, index) => {
+            if (v.name === name) {
               _this.setData({
                 deviceListIndex: index,
               });
@@ -567,30 +552,30 @@ Page({
         }
       }
     })
-    
+
   },
   goWake() {
-    if(this.data.deviceListIndex === null) {
+    if (this.data.deviceListIndex === null) {
       return;
     };
     wx.navigateTo({
       url: './../deviceWake/deviceWake?deviceId=' + this.data.deviceList[this.data.deviceListIndex].deviceId + "&clientType=" + this.data.deviceList[this.data.deviceListIndex].ProdModel,
     });
-    
+
   },
   goChnnel() {
     wx.setStorage({
       key: "channelDeta",
       data: this.data.channelData[this.data.actionIndex],
-      success(){
+      success() {
         wx.navigateTo({
           url: './../channelDetails/channelDetails'
         })
       }
     })
-    
+
   },
-  updata () {
+  updata() {
     // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
     wx.getUpdateManager().applyUpdate()
   },
@@ -600,7 +585,7 @@ Page({
     })
   },
   onUnload() {
-    if(app.globalData.client === null) {
+    if (app.globalData.client === null) {
       return;
     };
     app.globalData.client.end(true);

pages/index/index.wxml

@@ -17,7 +17,7 @@
       <text bindtap="goLogin">点击登录</text>
      </view>
   </view>
-  <view class="mair" style="height: calc(100vh - 22rpx - {{navBarHeight}}px);">
+  <view class="mair" style="height: calc(100vh - 22rpx - 100rpx - {{navBarHeight}}px);">
     <view wx:if="{{isShowDevicelist}}" class="deviceList" catchtap="isShowDevicelistFun">
       <view class="mz">
         <view class="li-view"  wx:for="{{deviceList}}">

pages/piano/rank/rank.wxml

@@ -14,7 +14,7 @@
   </view>
 
   <view class="tab_list">
-    <view wx:for="{{tabList}}" wx:key="{{item}}" wx:for-index="{{index}}">
+    <view wx:for="{{tabList}}" wx:key="item" wx:for-index="index">
       <text class="tabbar {{selectIndex == index ? select : unselect}}">{{item}}</text>
     </view>
   </view>

pages/piano/rank/rank.wxss

@@ -71,8 +71,7 @@ align-items: center;
 .container .rank_scroll {
   margin-top: 16rpx;
   width: 100%;
-  flex: 1;
-  display: flex;
+  height: 100%;
 }
 
 .container .rank_scroll .scoll_item {