index.wxml 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <view class="swiper_container">
  2. <swiper
  3. wx:if="{{isSwiper}}"
  4. class="video-swiper"
  5. circular="{{circular}}"
  6. next-margin="{{nextMargin}}"
  7. easing-function="{{easingFunction}}"
  8. vertical
  9. current="0"
  10. duration="{{duration}}"
  11. bindanimationfinish="animationfinish">
  12. <!-- curQueue 循环会导致video重新插入,objectFit 不可变更 -->
  13. <swiper-item class="swiper_item" wx:for="{{curQueue}}" data-id="{{item.id}}" wx:key="*this">
  14. <view class="head_box">
  15. <view class="user_box" catchtap="{{ifHeadTap ? 'headTap' : null}}" data-uid="{{item.uid}}">
  16. <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
  17. <view class="user_right">
  18. <view class="nickname">{{item.nickName}}</view>
  19. </view>
  20. </view>
  21. <view class="time">
  22. <text>发布时间:{{item.time}}</text>
  23. </view>
  24. </view>
  25. <video
  26. id="video_{{index}}"
  27. class="video_item"
  28. loop="{{loop}}"
  29. enable-play-gesture
  30. enable-progress-gesture
  31. show-center-play-btn="{{false}}"
  32. controls="{{true}}"
  33. src="{{item.url}}"
  34. object-fit="contain"
  35. data-index="{{index}}"
  36. >
  37. <!-- bindplay="onPlay"
  38. bindpause="onPause"
  39. bindended="onEnded"
  40. binderror="onError"
  41. bindtimeupdate="onTimeUpdate"
  42. bindwaiting="onWaiting"
  43. bindprogress="onProgress"
  44. bindloadedmetadata="onLoadedMetaData" -->
  45. </video>
  46. <view class="video_title">
  47. <text>
  48. {{item.title}}
  49. </text>
  50. </view>
  51. <view class="foot_box">
  52. <view class="foot_left">
  53. <view class="btn collect_btn" catchtap="collectTap" data-index="{{index}}" data-id="{{item.id}}" data-type="{{item.type}}">
  54. <image class="collect_btn_icon" src="{{item.isFavorite ? '../../static/index/star_colored.png' : '../../static/index/star.png'}}" />
  55. <text>收藏</text>
  56. </view>
  57. <view class="btn share_btn">
  58. <image class="share_btn_icon" src="../../static/index/share.png" lazy-load="true" />
  59. <text>分享</text>
  60. </view>
  61. </view>
  62. <view class="foot_right">
  63. <view class="btn flower_btn" catchtap="{{item.isLike ? null : 'likeTap'}}" data-index="{{index}}" data-id="{{item.id}}" data-islike="{{item.isLike}}">
  64. <image class="flower_btn_icon" src="{{item.isLike ? '../../static/index/flower_colored.png' : '../../static/index/flower.png'}}" />
  65. <text>{{item.likes}}</text>
  66. </view>
  67. <view class="btn comment_btn" catchtap="openComment" data-id="{{item.id}}">
  68. <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
  69. <text>{{item.commentAmount}}</text>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="btn_wrapper" catchtap="goToReading" data-id="{{item.classId}}">
  74. <view class="reading_btn">
  75. <image src="../../static/index/star.png" />
  76. <text>我要配音</text>
  77. </view>
  78. </view>
  79. </swiper-item>
  80. </swiper>
  81. <!-- // 非swiper -->
  82. <view wx:if="{{!isSwiper}}" class="swiper_item no_swiper" wx:for="{{videoList}}" data-id="{{item.id}}" wx:key="*this">
  83. <view class="head_box">
  84. <view class="user_box" catchtap="headTap" data-id="{{item.uid}}">
  85. <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
  86. <view class="user_right">
  87. <view class="nickname">{{item.nickName}}</view>
  88. </view>
  89. </view>
  90. <view class="time">
  91. <text>发布时间:{{item.time}}</text>
  92. </view>
  93. </view>
  94. <video
  95. id="video_{{index}}"
  96. class="video_item"
  97. loop="{{loop}}"
  98. enable-play-gesture
  99. enable-progress-gesture
  100. show-center-play-btn="{{false}}"
  101. controls="{{true}}"
  102. src="{{item.url}}"
  103. object-fit="contain"
  104. data-index="{{index}}"
  105. >
  106. <!-- bindplay="onPlay"
  107. bindpause="onPause"
  108. bindended="onEnded"
  109. binderror="onError"
  110. bindtimeupdate="onTimeUpdate"
  111. bindwaiting="onWaiting"
  112. bindprogress="onProgress"
  113. bindloadedmetadata="onLoadedMetaData" -->
  114. </video>
  115. <view class="video_title">
  116. <text>
  117. {{item.title}}
  118. </text>
  119. </view>
  120. <view class="foot_box">
  121. <view class="foot_left">
  122. <view class="btn collect_btn" catchtap="collectTap" data-id="{{item.id}}" data-type="{{item.type}}">
  123. <image class="collect_btn_icon" src="../../static/index/star.png" />
  124. <text>收藏</text>
  125. </view>
  126. <view class="btn share_btn" catchtap="likeTap" data-index="{{index}}" data-id="{{item.id}}" data-type="{{item.type}}">
  127. <image class="share_btn_icon" src="../../static/index/share.png" />
  128. <text>分享</text>
  129. </view>
  130. </view>
  131. <view class="foot_right">
  132. <view class="btn flower_btn" catchtap="likeTap" data-index="{{index}}" data-id="{{item.id}}" data-type="{{item.type}}">
  133. <image class="flower_btn_icon" src="../../static/index/flower.png" />
  134. <text>{{item.likes}}</text>
  135. </view>
  136. <view class="btn comment_btn" catchtap="openComment" data-id="{{item.id}}">
  137. <image class="comment_btn_icon" src="../../static/index/comment.png" />
  138. <text>{{item.likes}}123</text>
  139. </view>
  140. </view>
  141. </view>
  142. <view class="btn_wrapper" catchtap="goToReading" data-id="{{item.classId}}">
  143. <view class="reading_btn">
  144. <image src="../../static/index/star.png" />
  145. <text>我要配音</text>
  146. </view>
  147. </view>
  148. </view>
  149. </view>