WeChat small program commodity details round video + picture mix

The main problem

  • Image and video adaptive screen
  • Render according to resource type
  • Swipe to stop the video playing
  • Update resource serial number after sliding switch

The required components

  • swiper
  • swiper-item
  • image
  • video

The core code

details.wxml

<view class="thumbs"> <! > <swiper wx:if="{{total >= 2}}" circular="{{true}}" style="height: < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span style="height: {{width}}px;" bindchange="onSwiperChange"> <swiper-item wx:for="{{ thumbs }}" wx:for-item="thumb" wx:key="index"> <image style="width: 100%; height: 100%;" class="thumb" wx:if="{{ thumb.type === 'image' }}" mode="aspectFit" src="{{ thumb.url }}" title="{{ thumb.title }}" alt="{{ thumb.title }}"></image> <video id="video-{{index}}" style="width: 100%; height: 100%;" class="video" wx:if="{{ thumb.type === 'video' }}" show-fullscreen-btn="{{ false }}" src="{{ thumb.url }}"></video> </swiper-item> </swiper> <view wx:else> <! -- a single resource, --> <image wx:for="{{thumbs}}" wx:for-item="thumb" wx:key="index" style="width:{{width}}px; height:{{width}}px;" class="thumb" wx:if="{{ thumb.type === 'image' }}" mode="aspectFit" src="{{ thumb.url }}" title="{{ thumb.title }}" alt="{{ thumb.title }}"></image> <video wx:for="{{ thumbs }}" wx:for-item="thumb" wx:key="index" id="video-{{index}}" style="width:{{width}}px; height:{{width}}px;" class="video" wx:if="{{ thumb.type === 'video' }}" show-fullscreen-btn="{{ false }}" src="{{ thumb.url }}"></video> </view> <view class="counter"> <text class="index">{{ index }}</text><text class="spec">/</text><text class="total">{{ total }}</text> </view> </view>

details.js

Page { data: { index: 0, total: 0, width: 0, thumbs: []}, onSwiperChange (E) {// Prev = Index >= 1, const Prev = Index >= 1? index - 1 : this.data.total - 1 const next = index <= this.data.total - 2 ? index + 1 : 0; If (this.data.thumbs[prev]. Type === 'video') {const VideoContext = wx.createVideoContext('video-' + prev); // The corresponding video id videoContext.pause(); If (this.data.thumbs[next]. Type === 'video') {const VideoContext = wx.createVideoContext('video-'); + next) // Here is the corresponding video ID videoContext.pause(); } // Update the current number this.setData({index: Index + 1})}, loadProductThumbs () {// Ovok the data logic and set the total value to const _this = this; / / / * {data structure type: 'image | | video', url: '... ',... } */ wx.request({url: ", success: (res) => {_this.setData({total: Res.data.list.length, // Incremental update (whatever) : Thumbs: [...this.data.thumbs,...res.data.list]})})}, onLoad () {// Get the screen width to make the image or video full screen width, and the height is the same as the width, This.loadProductThumbs () const {screenWidth} = wx.getSystemInSync () this.setData({width: screenWidth }); }}

details.wxss

.thumbs {
  position: relative;
}

.thumbs .counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 2px 8px; 
  border-radius: 12px; 
  background-color: #0000008a; 
  color: #fafafa;
}

Counter (counter) style please customize ~^:^~

Leave a comment and discuss