微信小程序(原生)使用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再次封装基础组件文档

相关推荐
HerayChen1 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
中云DDoS CC防护蔡蔡8 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼11 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857513 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027714 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__20 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入2 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪