微信小程序(原生)使用Swiper实现(商品详情)视频和图片轮播(仿京东/淘宝商品详情头部视频+图片轮播)

一、需求

json 复制代码
1、如果第一是视频,不进行自动轮播
2、可以手动滑动切换
3、点击播放视频,也可以手动滑动切换
4、视频播放完后,自动轮播
5、视频可以点击暂停和全屏播放

二、最终效果

三、源码

播放icon使用了TDesign组件库

1、wxml

html 复制代码
<swiper class="detail-banner" wx:if="{{details.images.length > 0}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" style="background: #fff;">
      <swiper-item wx:for="{{bannerMsg}}" wx:for-item="item" wx:key="index">
        <view class='videocover' data-id="{{index}}" wx:if="{{item.type==2}}">
          <view class='videocoverbg'></view>
          <t-icon name="play-circle" size="100rpx" class="playIcon" bindtap="videoPlay" wx:if="{{!controls}}" />
        </view>
        <view wx:if="{{item.type==2}}">
          <video class='box-w block' id="video" src="{{item.url}}" show-center-play-btn="{{false}}" objectFit="cover" bindended="endPlay" controls="{{controls}}"></video>
        </view>
        <image class="detail-banner-img" src="{{item.url}}" data-src="{{item.url}}" wx:if="{{item.type==1}}"></image>
      </swiper-item>
    </swiper>

2、wxss

css 复制代码
 .detail-banner {
  width: 100%;
  height: 500rpx;
  padding: 0 0 10rpx 0;
}

.detail-banner-img {
  width: 100%;
  height: 100%;
}

/* video */

.box-w {
  width: 100%;
  height: 500rpx;
}

.videocover {
  width: 100%;
  overflow: hidden;
}

.videocoverbg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.playIcon {
  position: absolute;
  top: 50%;
  z-index: 2;
  left: 50%;
  width: 100rpx;
  height: 100rpx;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.videocover .cover {
  width: 100%;
}

3、js

js 复制代码
Page({
  data: {
    details: {}, // 商品详情信息
    indicatorDots: true, // 是否显示面板指示点
    autoplay: false, // 自动播放
    interval: 3000, // 自动切换时间间隔
    duration: 400, // 滑动动画时长
    circular: true, //是否循环 是否采用衔接滑动
    indicatorColor: "lightgray", //指示点颜色
    indicatorActiveColor: "red", //当前选中的指示点颜色
    controls: false, // 是否显示播放icon
  },

  // 获取商品详情
  getDetail(spuId) {
    const selectedAddr = wx.getStorageSync('addressMsg')
    const storeId = selectedAddr.storeId
    const selectedAddrStr = selectedAddr.street
    Promise.all([fetchGood(spuId, storeId), fetchActivityList(spuId, storeId)]).then((res) => {
      const [details, activityData] = res;
      const {video,images} = details;
      let bannerMsg = []
      bannerMsg = bannerMsg.concat(images)
      bannerMsg = bannerMsg.map(val => {
        return {
          type: 1,
          url: val
        }
      })
      if (video) {
        bannerMsg = [{ type: 2, url: video }, ...bannerMsg]
      }
      // console.log('bannerMsg', bannerMsg, images[0]);
      this.setData({
        details,
        bannerMsg
      });
    });
  },
  //预览图片
  previewImage(e) {
    console.log('预览图片', e)
    const current = e.currentTarget.dataset.src;
    wx.previewImage({
      current, // 当前显示图片的http链接  
      urls: this.data.bannerMsg
      // urls: this.data.imgUrls // 需要预览的图片http链接列表  
    })
  },
  // 播放
  videoPlay() {
    console.log("开始播放")
    this.setData({
      autoplay: false
    })
    let videoplay = wx.createVideoContext("video");
    videoplay.play()
    this.setData({
      controls: true
    })
  },
  // 结束播放
  endPlay() {
    console.log("结束播放")
    this.setData({
      controls: false,
      autoplay: true
    })
  },
  onShow() {
    this.getDetail();
  }
});

四、其他文章

基于ElementUi或Antd再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

相关推荐
小飞哥liac6 小时前
微信小程序的组件
微信小程序
stormjun8 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie23410 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong10 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
17 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
qq229511650219 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
ysdysyn21 小时前
C# winfrom实现微信(其他应用)自动跟随C#窗口,拖动页面自动恢复到固定位置
开发语言·微信·c#·winform
程序员入门进阶21 小时前
基于微信的追星小程序+ssm(lw+演示+源码+运行)
微信·小程序
一只不会编程的猫1 天前
微信小程序配置
微信小程序·小程序
程序员入门进阶1 天前
基于微信小程序的移动学习平台的设计与实现+ssm(lw+演示+源码+运行)
学习·微信小程序·小程序