首页 > 编程语言 >微信小程序——选项卡页面切换和视频播放

微信小程序——选项卡页面切换和视频播放

时间：2024-07-09 22:27:31浏览次数：22  
标签：function 视频 部分 选项卡 color 微信 播放 data 页面

选项卡页面切换


效果图

在这里插入图片描述
在这里插入图片描述

一、选项卡页面切换

第一部分 选项点击切换

在这里插入图片描述
代码部分
.wxml部分

<view class="dhangnan">
  <view class="tabdj  {{tab==0?'active':''}}" bind:tap="tabclick"
  data-index="0" >最新资讯</view>
  <view class="tabdj {{tab==1?'active':''}}" bind:tap="tabclick"
  data-index="1">基地新闻</view>
  <view class="tabdj {{tab==2?'active':''}}" bind:tap="tabclick"
  data-index="2">就业资讯</view>
  </view>

三目运算符：
(condition) ? value_if_true : value_if_false
这里的 condition 是一个返回布尔值的表达式，如果 condition 为真，则整个表达式的值为 value_if_true；如果 condition 为假，则整个表达式的值为 value_if_false。
例： 1>2?“真”:"假“

.wxss部分

.dhangnan{
  display:flex;
  margin-top: 10rpx;
  line-height: 70rpx;
}
.tabdj{
  width: 250rpx;
  text-align: center;
  border-bottom:1rpx solid gainsboro ; 
}
.active{
  border-bottom: 4rpx solid green;
}

.js部分

data: {
    tab:0,
  },
  tabclick:function(e){
    if (e.currentTarget.dataset.index==this.data.tab) {
      return false
    } else {
      this.setData({
        tab:e.currentTarget.dataset.index
      })
    }
  },
第二部分 选项卡页面内容滑动

在这里插入图片描述

代码部分
.wxml部分

<swiper current="{{tab}}" bindchange="zxchange" circular class="swip">
   <!-- wxml 文件 最新资讯选项卡 -->
   <swiper-item>00</swiper-item>
   <!-- wxml 文件 基地新闻选项卡 -->
   <swiper-item>
   <scroll-view scroll-y style="height: 800rpx;" bindscrolltolower="chudi">
    <view class="text-list" wx:for="{{25}}" wx:key="index">
      <view>
         厚溥数字成功入选湖南省产教融合型企业
       </view>
       <view>2023-07-06</view>
    </view>
    </scroll-view>
   </swiper-item>

   <!-- wxml 文件 就业资讯选项卡 -->
   <swiper-item>
   <scroll-view scroll-y style="height: 800rpx;" bindscrolltolower="chudi">
    <view class="text-list" wx:for="{{25}}" wx:key="index">
      <view>
         厚溥数字成功入选湖南省产教融合型企业
       </view>
       <view>2023-07-06</view>
    </view>
    </scroll-view>
   </swiper-item>
 </swiper>

滑动部分解释
.wxss部分

.text-list{
  display: flex;
 line-height: 50rpx;
 justify-content: space-around;
  font-size: 25rpx;
  height: 80rpx;
  align-items: center;
  border-bottom: 1rpx dashed rgb(197, 196, 196) ;
}
.swip{
 height: 800rpx;
}

,js部分

 zxchange:function(e){
    // console.log(e)
    if (e.detail.current==this.data.tab) {
      return false
    }
    else {
      this.setData({
        tab:e.detail.current
      })
    }
  },
  chudi:function(e) {
   wx.showToast({
    title: '到低啦',
   })
   
  }

二、视屏播放

第一部分 发布弹幕

在这里插入图片描述
代码部分
.wxml部分

<video id="rqvideo" src="{{videos}}"class="bofqi"
autoplay
danmu-btn
enable-danmu
show-fullscreen-btn
show-play-btn
enable-auto-rotation></video><!--解释在微信文档里-->
<view class="danmu">
  请文明发言：
  <input type="text" placeholder="请输入弹幕内容" bindinput="danminput"/>
</view>
<button class="but" bind:tap="bindSendDanmu">发送弹幕</button>

微信文档解释详细
.wxss部分

.bofqi{
  width: 100%;
}
.danmu{
  display: flex;
  margin-top: 20rpx;
  align-items: center;
}
.danmu input{
  border: 2rpx solid rgb(240, 195, 111);
  height: 80rpx;
  width: 500rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.but{
  background-color: rgb(175, 122, 8);
  color: white;
  margin-top: 25rpx;
}

.js部分

   srz:"",
  data: {
    videos:"https://permanent.aoscdn.com/app/lightmv/themes/2373/2373LR_1.mp4"
    },
    
   danminput:function (e) {
        this.srz=e.detail.value
     },
     
  bindSendDanmu:function() {
    this.videoContext.sendDanmu({
      text:this.srz,
      color:getRandomColor()
    })
  },

sendDanmu（解释在最最下面）

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  /* 向下翻到 onReady() ,只放下面一行代码*/
    this.videoContext = wx.createVideoContext('rqvideo')
    
  },

随机更换弹幕文字颜色
(放在.js文件page({})上面就行）

function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length === 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}
第二部分 点击视频播放和视频切换

在这里插入图片描述
上图的视频播放切换代码部分
.wxml部分

<view class="imbof" wx:for="{{list}}" wx:key="index" data-url="{{item.Url}}" bind:tap="tapurl">
    <image src="/image/play.png" mode="heightFix"></image>
    <view>{{item.title}}</view>
</view>

data- 属性主要用于WXML组件中，用于自定义数据绑定和事件处理。它们可以帮助开发者在组件之间传递特定的信息，特别是在触发事件时，data- 属性可以携带额外的数据到事件处理器中。

主要用途：
事件处理中的数据传递：
当你为某个组件绑定事件处理器时，例如bindtap，data-属性可以让你在触发事件时，将特定的数据一起发送到事件处理器。在事件处理器中，你可以通过e.currentTarget.dataset访问这些data-属性的值。

.wxss部分

.imbof{
  display: flex;
  align-items: center;
  border-bottom:2rpx dashed rgb(175, 122, 8);
  margin-top: 20rpx;
  padding-bottom:10rpx ;
  box-sizing: border-box;
}
.imbof image{
  height: 80rpx;
}

.js部分（第二和第一部分有共同用的部分代码哦）

data: {
    videos:"https://permanent.aoscdn.com/app/lightmv/themes/2373/2373LR_1.mp4",
    list:[{
      title:"河南厚溥有限公司企业发展历程",
      Url:"https://permanent.aoscdn.com/app/lightmv/themes/1502/1502LR.mp4"
    },{
      title:"河南厚溥学生学习团建视频",
      Url:"https://permanent.aoscdn.com/app/lightmv/themes/1611/1611LR.mp4"
    },{
      title:"河南厚溥学员点点滴滴的记忆",
      Url:"https://permanent.aoscdn.com/app/lightmv/themes/e6f0fd63bd262e4f0961987d6c71ddde/e6f0fd63bd262e4f0961987d6c71ddde.mp4"
    }]

  },
tapurl:function(e) {
    // console.log(e) 
    // 关闭播放的视频
    this.videoContext.stop()
    //换一下视频地址
    this.setData({
      videos:e.currentTarget.dataset.url
    })
    // 打开点击的视频
    this.videoContext.play()
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.videoContext = wx.createVideoContext('rqvideo')
    
  },

wx.createVideoContext 是微信小程序中用于操作视频组件的方法。它允许你创建一个视频上下文对象，通过这个对象你可以控制视频的播放、暂停、调整音量等操作。
可用的方法
一旦你创建了视频上下文对象，你可以调用以下方法来控制视频：

play(): 开始或继续播放视频。
pause(): 暂停视频播放。
stop(): 停止视频播放并重置到初始状态。
seek(position): 跳转到指定位置，单位为秒。
sendDanmu(danmu): 发送弹幕， danmu：是一个对象，包含弹幕的内容和颜色等属性。
offPlay(function callback): 取消监听视频开始播放事件。
offPause(function callback): 取消监听视频暂停事件。
offStop(function callback):取消监听视频停止事件。
offEnded(function callback): 取消监听视频自然结束事件。
offTimeUpdate(function callback): 取消监听视频播放进度更新事件。
offError(functioncallback): 取消监听视频解码错误事件。

标签：function,视频,部分,选项卡,color,微信,播放,data,页面
From： https://blog.csdn.net/2302_78057255/article/details/140305446

相关文章

  • 基于node.js的医院挂号页面爬虫
    背景TM的牙疼，想挂一个九院的专家，拔个牙。结果每天早起抢号都没抢到过。于是乎，就想通过捡漏的办法，24小时不间断请求医院挂号页面，看有没有专家放号。一旦检测到放号，就立即发邮件，发短信通知我。我立刻去挂号。（之所以没开发自动挂号功能，一是担心我身份证被医院拉黑，二是可能涉及到敏感......
  • 移动UI：该如何给页面降噪，给你支8招。
    为什么我的移动UI页面看来这么复杂、为什么用户很迷茫，不知道如何操作，为什么很拥挤，核心原因还是页面噪声过多了，需要适当的降噪。降低页面噪音，提高页面的简洁高效性是一个重要的设计目标。以下是一些降噪的设计方法：1.简化布局：简化页面布局，避免过多的装饰和复杂的排版，保持页面......
  • 微信小程序图片加载问题及解决方案
    引言在开发微信小程序的过程中，我们经常会遇到图片加载的问题。本文将分享一个常见的问题及其解决方法，帮助开发者避免在小程序中遇到图片加载失败或报错的情况。问题背景在开发一个微信小程序时，我遇到了一个棘手的问题：当图片的src属性被设置为一个变量时，图片无法成功加载，甚至......
  • 微信小程序 wx.navigateto无法跳转 原因如下：
     wx.navigateto无法跳转报错问题："wx.navigateto无法跳转"可能的原因和解决方法如下： 错误的使用方式：确保你使用的是wx.navigateTo而不是wx.navigateto，注意大小写。  目标页面不存在或路径错误：检查你要跳转的页面路径是否正确，确保在app.json中已经声明。......
  • springboot整合微信公众号实现模版消息推送
    欢迎来到我的博客，代码的世界里，每一行都是一个故事......
  • 【Javascript】微信小程序项目结构目录详解
    我白天是个搞笑废物表演不在乎夜晚变成忧伤怪物撕扯着孤独我曾经是个感性动物小心地感触现在变成无关人物                     ......
  • 用python一个集mes和erp在企业微信协同的服务案例
    要使用Python实现一个集MES和ERP于一体的企业微信协同服务案例，我们可以利用企业微信的API和第三方库`wechatpy`。以下是一个简单的实现思路：1.首先，安装`wechatpy`库，用于实现企业微信的相关功能。```pipinstallwechatpy```2.创建一个`WeChatService`类，用于实现企业微信......
  • 微信小程序 --判断是否是手机号
    validatemobile: function (mobile) {    if (mobile.length == 0) {     wx.showToast({            title: '请输入手机号！',            icon: 'success',            duration: 1500          })......
  • 微信小程序开发--获取输入框input的值的两种方式
    在微信小程序中，可以通过以下几种方式来获取输入框的值：方式1：使用bindinput绑定输入事件，通过event.detail.value获取输入框的值。具体操作如下：<inputbindinput="onInput"placeholder="请输入内容"></input>Page({onInput:function(event){varvalue=event.detail;......
  • tauri + vue3 如何实现在一个页面上局部加载外部网页？
    ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99