index wxml

<view>

<view class="top" style="margin-top: {{navTop*2}}rpx;">



<swiper wx:if="{{seeShow}}" bindchange="goodsDetailIndex" class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" current="{{currentIndex}}"

:duration="1000" circular="true">

<block wx:for="{{videos.imgList}}" wx:key="index">

<swiper-item>

<image class="img" src="{{item}}"  catchtap='groupClick' data-item='{{item}}'></image>

</swiper-item>

</block>

</swiper>



<view wx:else class="btnVideos" data-e="{{e}}"  cancelable="false"  catchtouchstart="start" catchtouchend="end">

<videos  videos="{{videos.videos}}"></videos>

</view>

<block wx:if="{{seeShow && videos.videos}}">

<view class="see" bindtap="btnSee">观看视频</view>

<view class="position">{{slideshowIndex}}/{{videos.imgList.length}}</view>

</block>



<view wx:if="{{!seeShow}}" class="btnClass" catchtap="btn"><text class="offVideo">退出播放</text></view>

</view>

<view class="center">

仿京东轮播图

</view>

</view>

index js

Page({

data: {

seeShow: true,

videos: {},

slideshowIndex: 1,

currentIndex: 0

},

onLoad: function () {

// 头部自定义导航

this.nav()

// 轮播图

this.selector()

},

nav(){

try {

const res = wx.getSystemInfoSync()

console.log(res);

console.log(res.pixelRatio,'设备像素比') // 设备像素比

console.log(res.windowWidth,'可使用窗口宽度，单位px') // 可使用窗口宽度，单位px

console.log(res.windowHeight,'可使用窗口高度，单位px') // 可使用窗口高度，单位px

console.log(res.screenWidth,'屏幕宽度，单位px'); // 屏幕宽度，单位px

console.log(res.screenHeight,'屏幕高度，单位px'); // 屏幕高度，单位px

console.log(res.screenHeight - res.windowHeight , '导航高度');

console.log(res.statusBarHeight, '设备的高度');

const resed  = wx.getMenuButtonBoundingClientRect()

console.log(resed);

console.log(resed.height, '按钮的高度'); // 按钮的高度

console.log(resed.width,'按钮的宽度');

console.log(resed.left,'离左边的宽度');

// 吸顶高度

const navTop = res.statusBarHeight

// 背景图的高度

const navHight = res.statusBarHeight + resed.height + (resed.top - res.statusBarHeight )*2

//  系统按钮离左边的距离

const navLeft = resed.left

// 搜索框的宽度

const searchWidth = resed.left - 20  // 这里宽度是自己定的

// 搜索框里左边的宽度

const searchLeft = 10  // 这里宽度是自己定的 / 2

// 系统按钮离顶部的距离

const searchTop = resed.top -  res.statusBarHeight

// 系统按钮的高度

const systemHeight = resed.height

// 背景图的宽度

const  navWidth = res.windowWidth

this.setData({

navWidth,

searchTop,

navLeft,

searchWidth,

searchLeft,

navHight,

navTop,

systemHeight

})

} catch (e) {

// Do something when catch error

}

},

selector() {

var that = this

// 页面加载到详情页获取详情页要渲染的数据

var api = '公司api无法透露'

wx.request({

url: api,

data: {

productId: 9,

userId: 261,

partnerId: 0,

platform: 'miniProgram',

},

success(res) {

console.log(res.data.data);

that.setData({

videos: res.data.data.swiperList

})

console.log(that.data.videos.videos);

console.log(res.data.data.swiperList.videos);

}

})

},

btnSee() {

this.setData({

seeShow: false

})

},

btn() {

this.setData({

seeShow: true

})

},

goodsDetailIndex(e) {

this.setData({

imgListIndex: e.detail.current + 1

})

},

popup(e) {

const position = e.currentTarget.dataset.position

let customStyle = ''

let duration = this.data.duration

switch (position) {

case 'top':

case 'bottom':

customStyle = 'height: 80%;'

break

case 'right':

break

}

this.setData({

position,

show: true,

customStyle,

duration

})

},

//手指开始触屏

start: function (e) {

//获取触摸的原始点

this.setData({

touchX: e.touches.length > 0 ? e.touches[0].pageX : 0,

})

},

//手指结束触屏

end: function (e) {

let touchX = e.changedTouches.length > 0 ? e.changedTouches[0].pageX : 0

let tmX = touchX - this.data.touchX

//滑动swiper，视频停止播放

this.setData({

seeShow: true

})

if (tmX < 0) {

//左滑

console.log(this.data.slideshowIndex);

var a = this.data.slideshowIndex

if (this.data.slideshowIndex == this.data.videos.imgList.length) {

a = 0

}

this.setData({

slideshowIndex: a,

currentIndex: a

})

} else {

//右滑

var b = this.data.slideshowIndex - 1

if (this.data.slideshowIndex == 1) {

b = this.data.videos.imgList.length

}

this.setData({

slideshowIndex: b,

currentIndex: b - 1

})

}

},

goodsDetailIndex(e) {

this.setData({

slideshowIndex: e.detail.current + 1,

currentIndex: e.detail.current

})

},

groupClick(e){

console.log(this.data.videos);

wx.previewImage({

current: e.currentTarget.dataset.item, // 当前显示图片的http链接

urls: this.data.videos.imgList // 需要预览的图片http链接列表

})

},

})

index json

{

"navigationStyle": "custom",

"usingComponents": {

"videos":"/components/videos/videos"

}

}

index wxss

page{

background-color: #f7f7f7;

}

.btnClass{

display: flex;

justify-content: center;

align-items: center;

height: 93rpx;

background-color: #000;

}

.offVideo{

color: #3399ff;

padding: 10rpx 20rpx;

border-radius: 60rpx;

background-color: #ccc;

}

.img{

width: 100%;

height: 750rpx;

}

.swiper{

width: 100%;

height: 750rpx;

}

.top{

position: relative;

}

.see{

position: absolute;

bottom: 20rpx;

left: 50%;

transform: translateX(-50%);

padding: 10rpx 20rpx;

border-radius: 30rpx;

color: #3399ff;

background-color: rgba(240, 238, 238,.6);

}

.btnVideos{

background-color: #000;

}

.position{

position: absolute;

right: 0;

bottom: 30rpx;

color: #f7f7f7;

background-color: rgba(0, 0, 0,.3);

padding: 0rpx 20rpx;

border-top-left-radius: 20rpx;

border-bottom-left-radius: 20rpx;

}

.center{

margin-top: 20rpx;

text-align: center;

background-color: #3399ff;

}

组件 videos.js

Component({

/**

* 组件的属性列表

*/

properties: {

videos:{

type:String,

value:'',

}

},

/**

* 组件的初始数据

*/

data: {

},

/**

* 组件的方法列表

*/

methods: {

}

})

组件 json

{

"component": true,

"usingComponents": {}

}

组件 wxml

<view>

<video class="videos" src="{{videos}}" autoplay="true" enable-progress-gesture="{{false}}"></video>

</view>

组件 wxss

.videos{

width: 100%;

height: 650rpx;

}

商品图片和视频

微信小程序图片轮播视频相关推荐

微信小程序图片轮播+预览效果实现
实现思路功能其实很简单,只需用到官方提供的swiper组件+wx.previewImage函数,再利用data-组件绑定当前的url即可轻松实现. 1.微信小程序swiper组件 2.微信小程序预览 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
php微信号轮播系统,微信小程序的轮播功能
我们在官网上可以看到轮播相关的说明了,这里是通过一个实例来说明一下微信小程序的轮播功能的实现效果: 先看一下效果图: JS代码:var app = getApp(); Page({ data: { i ...
微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）
之前从来没有接触过前端,最近开始学习微信小程序,因为没有基础所以学起来有点难度.在学习这个swiper标签的时候遇到了一些问题.首先一个问题就是轮播图中的图片显示不全,尽管已经给image设置成了wi ...
微信小程序3D轮播图实现
好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于 ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...

微信小程序图片轮播视频

index wxml

index js

index json

index wxss

组件 videos.js

组件 json

组件 wxml

组件 wxss

商品图片和视频

微信小程序图片轮播视频相关推荐

最新文章

热门文章

微信小程序 图片轮播 视频

index wxml

index js

index json

index wxss

组件 videos.js

组件 json

组件 wxml

组件 wxss

商品图片 和视频

微信小程序 图片轮播 视频相关推荐

最新文章

热门文章

微信小程序图片轮播视频

商品图片和视频

微信小程序图片轮播视频相关推荐