reader/pages/activity/index/index.wxml

<!--pages/activity/index/index.wxml-->
<view class="activity-index">
  <image class="activity-bg" src="http://reader-wx.ai160.com/images/reader/activity/bg.jpg" mode="scaleToFill"></image>
  <view class="rule" bindtap="rule">
    <image src="../../../static/activity/rule-img.png"></image>
  </view>
  <view class="strategy" bindtap="strategy">
    <image src="../../../static/activity/strategy-img.png"></image>
  </view>
  <view class="activity-works">
    <image class="swiper-bg" src="http://reader-wx.ai160.com/images/reader/activity/swiper-bg.png" mode="scaleToFill"></image>
    <text class="gradeText">{{grades}}朗读范文素材</text>
    <view class="activity-works-swiper">
      <swiper indicator-dots="true" autoplay="false" circular="true" previous-margin="66rpx" next-margin="56rpx" indicator-color="#BABABA" indicator-active-color="#fff">
        <block wx:for="{{activityReadData}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item-view" bindtap="goToReading" data-id="{{item.id}}">
              <image src="{{item.iconImg}}" mode="scaleToFill"></image>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
  <view class="activity-ranking">
    <view class="activity-ranking-tab">
      <image class="tab-bg" src="../../../static/activity/tab-bg.png" mode="scaleToFill"></image>
      <image  class="select-bg {{selectInd === 0 ? 'left' : 'right'}}" src="{{selectBg[selectInd]}}" mode="scaleToFill"></image>
      <text class="left {{selectInd === 0 && 'select'}}" data-index="0" bindtap="tabSelect">TOP100人气榜单</text>
      <text class="right {{selectInd === 1 && 'select'}}" data-index="1" bindtap="tabSelect">我的参赛作品</text>
    </view>
    <view class="activity-ranking-container" style="background: #fff;" hidden="{{selectInd === 1}}">
      <view class="activity-ranking-title">
        <text>排名</text>
        <text>名称</text>
        <text>人气值</text>
      </view>
      <view class="scroll-view" style="{{myHotAmountData.activityJoinUser ? 'margin-bottom: 150rpx;' : ''}}">
        <view class="scroll-view-item" wx:for="{{hotAmountTopData}}" wx:for-index="index" wx:key="*this">
          <image wx:if="{{sortImg[index]}}" class="ranking-number-img" src="{{sortImg[index]}}"></image>
          <text wx:else class="ranking-number">{{index + 1}}</text>
          <view class="ranking-message">
            <view class="reanking-message-head">
              <image class="haed-url" bindtap="headTap" src="{{item.user.avatar}}" data-uid="{{item.user.uid}}"></image>
              <image class="follow-url" src="{{item.isFans ? '' : '../../../static/activity/follow.png'}}" bindtap="{{!item.isFans && 'follow'}}" data-uid="{{item.user.uid}}" data-fans="{{item.isFans}}"></image>
            </view>
            <view class="reanking-message-name">
              <text>{{item.user.wechatName}}</text>
              <view class="operation">
                <view class="forward">
                  <image src="../../../static/activity/forward1.png"></image>
                  {{item.activityJoinUser.shareAmount}}
                </view>
                <view class="like">
                  <image src="../../../static/activity/like1.png"></image>
                  {{item.activityJoinUser.likeAmount}}
                </view>
                <view class="comment">
                  <image src="../../../static/activity/comment1.png"></image>
                  {{item.activityJoinUser.commentAmount}}
                </view>
              </view>
            </view>
          </view>
          <view class="popularity">
            <image src="../../../static/activity/popularity1.png"></image>
            {{item.activityJoinUser.hotAmount}}
          </view>
        </view>
      </view>
    </view>
    <view class="activity-my-ranking" hidden="{{selectInd === 1 || !myHotAmountData.activityJoinUser}}">
        <text class="ranking-number" style="color: #fff;">{{myHotAmountData.activityJoinUser.order}}</text>
        <view class="ranking-message">
          <view class="reanking-message-head">
            <image class="haed-url" src="{{myHotAmountData.user.avatar}}"></image>
          </view>
          <view class="reanking-message-name" style="color: #fff;">
            <text style="color: #fff;">{{myHotAmountData.user.wechatName}}</text>
            <view class="operation" style="color: #fff;">
                <view class="forward">
                  <image src="../../../static/activity/forward.png"></image>
                  {{myHotAmountData.activityJoinUser.shareAmount}}
                </view>
                <view class="like">
                  <image src="../../../static/activity/like.png"></image>
                  {{myHotAmountData.activityJoinUser.likeAmount}}
                </view>
                <view class="comment">
                  <image src="../../../static/activity/comment.png"></image>
                  {{myHotAmountData.activityJoinUser.commentAmount}}
                </view>
            </view>
          </view>
        </view>
        <view class="popularity" style="color: #fff;">
          <image src="../../../static/activity/popularity.png"></image>
          {{myHotAmountData.activityJoinUser.hotAmount}}
        </view>
    </view>
    <view class="my-activity-read" hidden="{{selectInd === 0}}">
      <VideoSwiper wx:if="{{activityMyReadData.length > 0}}" class="video-swiper" video-list="{{activityMyReadData}}" nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}" noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}" binddelHideMyWork="delHideMyWork" bindcollectTap="collectTap" bindlikeTap="likeTap" bindopenComment="openComment" bindopenShare="openShare"/>
      <image class="no_works" wx:if="{{activityMyReadData.length === 0}}" src="http://reader-wx.ai160.com/images/reader/activity/no_works.png"/>
    </view>
    <view class="comment_section" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
      <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}" bindsendReply="sendReply" />
    </view>
  </view>

</view>
<canvas canvas-id="myCanvas" style="width:300px; height: 525px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>