微信小程序仿写小视频滑屏翻页播放下一个视频效果、自定义导航栏

最新推荐文章于 2021-06-08 20:50:59 发布

幽幽靖

最新推荐文章于 2021-06-08 20:50:59 发布

阅读量994

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ws19900201/article/details/103455499

版权

本文介绍了如何在微信小程序中实现点击视频列表后进入播放页，并仿写小视频滑屏翻页无缝播放下一个视频的效果。同时，文章详细讲解了自定义导航栏的设置方法，提供了相关的HTML、CSS和JS代码示例。然而，目前存在一个问题，即从视频列表跳转到播放页时，由于swiper动画，导致过渡效果不理想，作者指出这需要进一步优化。

摘要由CSDN通过智能技术生成

视频列表，点击进入视频播放页，仿写小视频滑屏翻页播放下一个视频效果、自定义导航栏

自定义导航详细介绍看这里：https://blog.csdn.net/ws19900201/article/details/103437964

视频列表:
html:

<!--pages/video/video.wxml-->
  <view class="video">
     <view class="videolist">
      <view class="vidul">
        <view class="vidli" wx:for="{
    {videoList}}"
          wx:key="{
    {item.v_id}}"
          data-vid="{
    {item.v_id}}" 
          bindtap="videoinfo" > <!-- 点击记录v_id, 进入视频播放页 并跳转至v_id -->
          <view class="picbox">
            <image class="vidimg" mode="aspectFill" src="{
    {item.thumbnail}}" alt="" />
            <!-- <i class="startico"></i> -->
            <p class="bomtxt">{
  { item.post_title }}</p>
          </view>
          <view class="bombox">
            <view class="lef">
              <image class="vidimg" mode="widthFix" src="../../images/tximg.png" alt="" />
              <!-- item.avatar -->