index.wxml 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <view class="container">
  2. <swiper
  3. class="video-swiper"
  4. circular="{{circular}}"
  5. next-margin="{{nextMargin}}"
  6. easing-function="{{easingFunction}}"
  7. vertical
  8. current="0"
  9. duration="{{duration}}"
  10. bindanimationfinish="animationfinish">
  11. <!-- curQueue 循环会导致video重新插入,objectFit 不可变更 -->
  12. <swiper-item class="swiper_item" wx:for="{{curQueue}}" data-id="{{item.id}}" wx:key="*this">
  13. <view class="head_box">
  14. <view class="user_box" catchtap="headTap" data-id="{{item.uid}}">
  15. <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
  16. <view class="user_right">
  17. <view class="nickname">{{item.nickName}}</view>
  18. <view class="time">
  19. <text>发布时间:</text>
  20. <text>{{item.time}}</text>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="more_btn">
  25. <view class="more_item"></view>
  26. <view class="more_item"></view>
  27. <view class="more_item"></view>
  28. </view>
  29. </view>
  30. <video
  31. id="video_{{index}}"
  32. class="video_item"
  33. loop="{{loop}}"
  34. enable-play-gesture
  35. enable-progress-gesture
  36. show-center-play-btn="{{false}}"
  37. controls="{{true}}"
  38. src="{{item.url}}"
  39. object-fit="contain"
  40. data-index="{{index}}"
  41. >
  42. <!-- bindplay="onPlay"
  43. bindpause="onPause"
  44. bindended="onEnded"
  45. binderror="onError"
  46. bindtimeupdate="onTimeUpdate"
  47. bindwaiting="onWaiting"
  48. bindprogress="onProgress"
  49. bindloadedmetadata="onLoadedMetaData" -->
  50. </video>
  51. <view class="video_title">
  52. <text>
  53. {{item.title}}
  54. </text>
  55. </view>
  56. <view class="foot_box">
  57. <view class="foot_left">
  58. <view class="btn collect_btn">
  59. <image class="collect_btn_icon" src="../../static/index/star.png" lazy-load="true" />
  60. <text>收藏</text>
  61. </view>
  62. <view class="btn share_btn">
  63. <image class="share_btn_icon" src="../../static/index/share.png" lazy-load="true" />
  64. <text>分享</text>
  65. </view>
  66. </view>
  67. <view class="foot_right">
  68. <view class="btn flower_btn">
  69. <image class="flower_btn_icon" src="../../static/index/flower.png" lazy-load="true" />
  70. <text>{{item.likes}}</text>
  71. </view>
  72. <view class="btn comment_btn" catchtap="openComment" data-id="{{item.id}}">
  73. <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
  74. <text>{{item.likes}}123</text>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="btn_wrapper">
  79. <view class="reading_btn">
  80. <image src="../../static/index/star.png" />
  81. <text>我要配音</text>
  82. </view>
  83. </view>
  84. </swiper-item>
  85. </swiper>
  86. </view>