玩转微信小程序（第五天）

一，tab切换

需要完成效果

需要用到组件
data- 属性是一种特殊类型的属性，用于存储页面或应用程序的私有定制数据。这些属性不会被浏览器解析或改变页面的行为，而是被保留供JavaScript或CSS使用。
格式如下
< view id=“example” data-my-custom-attribute=“some value”>Hello World!< /view >

bindscrolltolower 是微信小程序中 scroll-view 组件的一个事件绑定属性，当滚动触底时触发。
查看更多组件

1.1需要进行布局

这里需要注意的是需要用data-来传值到js来进行判断
需要用到bindchange来进行文章的变化

< view class="header" >
  < view class="headtitle  {{xztab==0?  'active':''}} "
  bind:tap="titclick" data-index="0" >最新咨询< /view>
  < view class="headtitle {{ xztab==1?'active':''}}"
  bind:tap="titclick" data-index="1">行业新闻< /view>
  < view class="headtitle {{xztab==2?'active':''}}"
  bind:tap="titclick" data-index="2">咨询新闻</ view>
< /view>

<swiper  current="{{xztab}}" bindchange="qhtab" class="hybox">
  <swiper-item>
    <scroll-view scroll-y style="height: {{screenHeight}}px;" bindscrolltolower="cdtishi">
     111
    </scroll-view>
  </swiper-item>
  <swiper-item >
   222
  </scroll-view>
  </swiper-item>
  <swiper-item>
   333
  </swiper-item>
</swiper>

1.2需要用到js来实现文章的动态效果

xztab是进行文字下划线的修改
titclick是点击view来进行手动切换页面
qhtab是滑动进行切换页面
wx.getWindowInfo 是微信小程序 API 中的一个方法，用于获取当前窗口的信息，包括窗口的尺寸、设备的方向。
这里用到wx.getWindowInfo是来获得用户手机的高度来动态设置值

Page({

/**
 * 页面的初始数据
 */
data: {
  xztab:0,
  screenHeight:0,
},
//手动点击切换
titclick(e){
  
  if (e.currentTarget.dataset.index==this.data.xztab) {
    return false;
  } else {
    this.setData({
      xztab:e.currentTarget.dataset.index
    })
  }
},
cdtishi(){
  wx.showToast({
    title: '已经到底部了'
   
  })
},
//滑动切换
qhtab(e){
  // console.log(e.detail.current)
  //如果不等于
  if (e.detail.current != this.data.xztab) {
    this.setData({
      xztab:e.detail.current
    })
  }
  else{
      return false
    }
  
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  const windowInfo = wx.getWindowInfo()
  this.setData({
    screenHeight:windowInfo.screenHeight
  })
},

二 ，视频播放及弹幕的使用

效果实现

需要用到组件
video 组件用于播放视频文件。它支持多种视频格式，包括 MP4、WebM 和 Ogg。 组件提供了控制视频播放、暂停、音量等特性的多种属性和事件。
以下是一些常用的属性：
src：视频文件的 URL。
enable-danmu：是否开启弹幕。
danmu-btn：是否显示弹幕按钮。
show-progress：是否显示进度条。
enable-play-gesture：是否启用手势播放/暂停。
autoplay：是否自动播放。
controls：是否显示系统播放控件。
object-fit：视频内容的缩放模式。

2.1进行布局

这里是从js中提取出来url来进行切换播放
这里需要注意的是如果进行for循环的是一个数组那么就需要在值的前面加一个item来进行传值

<video id="myvideo" class="myVideo" src="{{vurl}}"
enable-auto-rotation
danmu-btn
controls
autoplay
enable-danmu

>
</video>

<input type="text" class="danmuinput" placeholder="请输入弹幕" bindinput="inputdanmu" />
<button class="btndanmu"  bind:tap="btndm"> 发送弹幕</button>

<view class="videoList" wx:for="{{list}}" wx:key="index" data-url="{{item.videoUrl}}" bind:tap="videoClick">
  <image src="/image/play.png"></image>
  <view>{{item.title}}</view>
</view>

2.2js页面实现

这里需要设置一个全局变量来实现弹幕，我这里设置的是srz

videoClick是切换视频
btndm是点击按钮来发送弹幕、
inputdanmu是弹幕输入框
onReady是页面刚加载就进行渲染
createVideoContext 是微信小程序中用于创建一个指向 video 组件的上下文的方法this.videoContext是自定义命名。

videoClick里需要先进行视频暂停，在通过setData来进行赋值，最后在进行播放

inputdanmu需要用到bind input事件把值赋给srz

btndm发送弹幕需要用到sendDanmu，里面的属性都是固定属性不需要自己添加属性，写完之后需要进行重启才能实现

srz:"",
    data: {
      vurl:"https://permanent.aoscdn.com/app/lihtmv/temes/2373/2373LR_1.mp4",
    list:[{
      title:"企业发展历程",
      videoUrl:"https://permanent.aoscdn.com/app/lightmv/thmes/1502/1502LR.mp4"
    },{
      title:"团建视频",
      videoUrl:"https://permanent.aoscdn.com/app/lightmv/thees/1611/1611LR.mp4"
    },{
      title:"点点滴滴的记忆",
      videoUrl:"https://permanent.aoscdn.com/app/lightmv/themes/e6f0fd63bd262e4f0961987d6c71ddde/e6f0fd63bd262e4f0961987d6c71ddde.mp4"
    }]
    },
    videoClick(e){
      this.videoContext.stop()
      this.setData({
        vurl:e.currentTarget.dataset.url
      })
      this.videoContext.play()
    },
    inputdanmu(e){
      this.srz=e.detail.value
      
    },
    btndm(){
      this.videoContext.sendDanmu({
        text:this.srz,
        color:getRandomColor()

      })

    },

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