首页 >> js开发 >> js微信小程序swiper组件实现抖音翻页切换视频功能的实例代码js大全
js微信小程序swiper组件实现抖音翻页切换视频功能的实例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo利用swiper组件可简单快速编写仿抖音短视频的功能
自动播放当前页视频
翻页停止播放当前页视频 并自动播放下页视频有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能效果图:video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.htmlswiper官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html注: 官方一篇文档介绍,
基础库 2.4.4 以下版本,
video (原生) 组件不支持在 swiper 中使用介绍: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html臭豆腐 腐乳 加柠檬 上代码就完了 奥利给 ! ! !
(里面有自定义导航栏的代码 但不多 参考着康康... 吼吼吼...)wxml:
wxss:
cover-view {
width: 100%;
position: fixed;
z-index: 999;
}
cover-image {
width: 17px;
height: 17px;
margin-left: 8px;
padding-right: 20px;
position: absolute;
bottom: 11px;
}
cover-view {
width: 100%;
position: fixed;
z-index: 999;
}
cover-image {
width: 17px;
height: 17px;
margin-left: 8px;
padding-right: 20px;
position: absolute;
bottom: 11px;
}json:
{
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"usingComponents": {}
}
{
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"usingComponents": {}
}js:
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
screenHeight: app.screenHeight,//获取屏幕高度
statusBarHeight: app.statusBarHeight,//获取状态栏高度
navBarHeight: app.navBarHeight,//获取导航栏高度
changeIndex: 0,
video: [{
id: 0,
video: "/*视频地址*/"
}, {
id: 1,
video: "/*视频地址*/"
}, {
id: 2,
video: "/*视频地址*/"
}]
},
//划动切换
slide(e) {
this.setData({
changeIndex: e.detail.current
})
console.log(e.detail.current)
}
})
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
screenHeight: app.screenHeight,//获取屏幕高度
statusBarHeight: app.statusBarHeight,//获取状态栏高度
navBarHeight: app.navBarHeight,//获取导航栏高度
changeIndex: 0,
video: [{
id: 0,
video: "/*视频地址*/"
}, {
id: 1,
video: "/*视频地址*/"
}, {
id: 2,
video: "/*视频地址*/"
}]
},
//划动切换
slide(e) {
this.setData({
changeIndex: e.detail.current
})
console.log(e.detail.current)
}
})app.js
App({
onLaunch: function() {
// 获取系统信息
wx.getSystemInfo({
success: (res) => {
// 获取屏幕高度
this.screenHeight = res.screenHeight
// 获取状态栏高度
this.statusBarHeight = res.statusBarHeight
// 通过操作系统 确定自定义导航栏高度
if (res.system.substring(0, 3) == "iOS") {
this.navBarHeight = 42
} else {
this.navBarHeight = 44
}
}
})
}
})
App({
onLaunch: function() {
// 获取系统信息
wx.getSystemInfo({
success: (res) => {
// 获取屏幕高度
this.screenHeight = res.screenHeight
// 获取状态栏高度
this.statusBarHeight = res.statusBarHeight
// 通过操作系统 确定自定义导航栏高度
if (res.system.substring(0, 3) == "iOS") {
this.navBarHeight = 42
} else {
this.navBarHeight = 44
}
}
})
}
})总结总结总结
自动播放当前页视频
翻页停止播放当前页视频 并自动播放下页视频有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能效果图:video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.htmlswiper官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html注: 官方一篇文档介绍,
基础库 2.4.4 以下版本,
video (原生) 组件不支持在 swiper 中使用介绍: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html臭豆腐 腐乳 加柠檬 上代码就完了 奥利给 ! ! !
(里面有自定义导航栏的代码 但不多 参考着康康... 吼吼吼...)wxml:
wxss:
cover-view {
width: 100%;
position: fixed;
z-index: 999;
}
cover-image {
width: 17px;
height: 17px;
margin-left: 8px;
padding-right: 20px;
position: absolute;
bottom: 11px;
}
cover-view {
width: 100%;
position: fixed;
z-index: 999;
}
cover-image {
width: 17px;
height: 17px;
margin-left: 8px;
padding-right: 20px;
position: absolute;
bottom: 11px;
}json:
{
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"usingComponents": {}
}
{
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"usingComponents": {}
}js:
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
screenHeight: app.screenHeight,//获取屏幕高度
statusBarHeight: app.statusBarHeight,//获取状态栏高度
navBarHeight: app.navBarHeight,//获取导航栏高度
changeIndex: 0,
video: [{
id: 0,
video: "/*视频地址*/"
}, {
id: 1,
video: "/*视频地址*/"
}, {
id: 2,
video: "/*视频地址*/"
}]
},
//划动切换
slide(e) {
this.setData({
changeIndex: e.detail.current
})
console.log(e.detail.current)
}
})
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
screenHeight: app.screenHeight,//获取屏幕高度
statusBarHeight: app.statusBarHeight,//获取状态栏高度
navBarHeight: app.navBarHeight,//获取导航栏高度
changeIndex: 0,
video: [{
id: 0,
video: "/*视频地址*/"
}, {
id: 1,
video: "/*视频地址*/"
}, {
id: 2,
video: "/*视频地址*/"
}]
},
//划动切换
slide(e) {
this.setData({
changeIndex: e.detail.current
})
console.log(e.detail.current)
}
})app.js
App({
onLaunch: function() {
// 获取系统信息
wx.getSystemInfo({
success: (res) => {
// 获取屏幕高度
this.screenHeight = res.screenHeight
// 获取状态栏高度
this.statusBarHeight = res.statusBarHeight
// 通过操作系统 确定自定义导航栏高度
if (res.system.substring(0, 3) == "iOS") {
this.navBarHeight = 42
} else {
this.navBarHeight = 44
}
}
})
}
})
App({
onLaunch: function() {
// 获取系统信息
wx.getSystemInfo({
success: (res) => {
// 获取屏幕高度
this.screenHeight = res.screenHeight
// 获取状态栏高度
this.statusBarHeight = res.statusBarHeight
// 通过操作系统 确定自定义导航栏高度
if (res.system.substring(0, 3) == "iOS") {
this.navBarHeight = 42
} else {
this.navBarHeight = 44
}
}
})
}
})总结总结总结
相关文章:
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- js解决vue bus.$emit触发第一次$on监听不到问题js大全
- jsvue 遮罩层阻止默认滚动事件操作js大全
- jsvue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)js大全
- js代码JavaScript 监听组合按键思路及代码实现
- JavaScriptvue.js 解决v-model让select默认选中不生效的问题
- jsvue中touch和click共存的解决方式js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- js使用eslint和githooks统一前端风格的技巧js大全