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

效果图

一、选项卡页面切换

第一部分 选项点击切换

代码部分
.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()
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(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): 取消监听视频解码错误事件。