勋章可以滑动

pages/index/index.wxml

@@ -53,11 +53,11 @@
               </view>
               <view class="ranking-con">
                 <view class="rank">
-                  <text>好友数: {{rankData.friendsRank.number}}</text>
+                  <text>好友数: {{rankData.friendsRank.number}}个</text>
                   <text>第{{rankData.friendsRank.rank}}名</text>
                 </view>
                 <view class="rank">
-                  <text>勋章数量：{{rankData.metalsRank.number}}</text>
+                  <text>勋章数量：{{rankData.metalsRank.number}}枚</text>
                   <text>第{{rankData.metalsRank.rank}}名</text>
                 </view>
                 <view class="rank">
@@ -65,7 +65,7 @@
                   <text>第{{rankData.expRank.rank}}名</text>
                 </view>
                 <view class="rank">
-                  <text>答题量：{{rankData.userQuestionRank.number}}</text>
+                  <text>答题量：{{rankData.userQuestionRank.number}}道</text>
                   <text>第{{rankData.userQuestionRank.rank}}名</text>
                 </view>
                 <view class="rank">
@@ -84,10 +84,12 @@
                 <text class="{{data.metalsList.length > 0 ? 'none' : ''}}">本周还没获得</text>
               </view>
               <view class="img">
-                <view wx:for="{{data.metalsList}}" wx:key="{{item.id}}" >    
-                  <image src="{{item.img}}"></image>
-                  <text>{{item.name}}</text>
-                </view>
+                <scroll-view scroll-x="true" class="medal-img" scroll-with-animation="true">
+                  <view wx:for="{{data.metalsList}}" wx:key="{{item.id}}" >    
+                    <image src="{{item.img}}"></image>
+                    <text>{{item.name}}</text>
+                  </view>
+                </scroll-view>
               </view>
             </view>
             <!-- 课模板 -->

pages/index/index.wxss

@@ -147,25 +147,29 @@
 }
 
 .img {
-  display: flex;
+  width: 100%;
+  overflow: hidden;
   margin-top: 38rpx;
 }
 
+.medal-img {
+  white-space:nowrap; 
+}
+
 .img view {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  display: inline-block;
+  text-align: center;
   margin-right: 15rpx;
 }
 
 .img image {
+  display: block;
   width: 100rpx;
   height: 100rpx;
 }
 
 .img text {
+  display: block;
   font-size: 24rpx;
   color: #878787;
   margin-top: 10rpx;