20.1 Toggle label loading Tips

wx.showLoading： It will display a loading Prompt box , And you have to use wx.hideLoading.

20.2 Improvement of navigation area

1. Use scroll-into-view attribute bring Navigation bar after clicking First place Move to Click on the sub item .
   scroll-into-view ： Its value Must be item Of id, So we have to Go to Set it up item Of id. and This id best stay js layer Can be Take it . In this case , stay Between different components You can do it all Got it . otherwise This function cannot be realized . Pay attention to is It accepts id Must be a String type , therefore You may need to Splicing A string Go ahead transformation ！

<!--  Navigation area -->
    <scroll-view scroll-x="true" class="navScroll" enable-flex="true" scroll-into-view="{
     {
     'scroll' + navId}}" scroll-with-animation="true" >
        <view id="{
     {
     'scroll' + item.id}}" class="navItem" wx:for="{
     {videoGroupList}}" wx:key="id">
            <view class="navContent {
     {navId == item.id? 'active':''}}" bindtap="changeNav" id="{
     {item.id}}">
                {
   {item.name}}
            </view>
        </view>
    </scroll-view>

scroll-with-animation="true"： In order to Let it Yes dynamic transition The effect of , This is more beautiful .

20.3 Solve multiple video playback problems

bindplay： Click on the video Triggering event . You can bind a Method .

wx.createVideoContext(this.data.preVid)： Get This video Of Context then Can operation Pause and play the video .

    //  Click video event 
    handlePlay(event){
    
        let vid = event.currentTarget.id;
        if(this.data.preVid == ""){
    
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
    
                preVid: vid
            });
            console.log(vid);
            console.log(this.data.preVid);
        }else if(vid != this.data.preVid){
    
            let videoContext = wx.createVideoContext(this.data.preVid);
            videoContext.stop();
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
    
                preVid: vid
            });
        }
    },

20.4 Set the cover of the video and replace it with a cover image video label

use image picture Instead of video Words , can hold performance optimization .

<!--  Video list area -->
    <scroll-view scroll-y="true">
        <view class="videoItem" wx:for="{
     {videoList}}" wx:key="id">
            <view class="content">{
   {item.data.title}}</view>
            <video id="{
     {item.data.vid}}" src="{
     {videoURLs[index]}}" bindplay="handlePlay" poster="{
     {item.data.coverUrl}}" class="common" wx:if = "{
     {item.data.vid == preVid}}" ></video>
<!--  performance optimization -->
            <image id="{
     {item.data.vid}}" src="{
     {item.data.coverUrl}}" class="common" bindtap = "handlePlay" wx:else ></image>
            <view class="footer">
                <image class="avatar" src="{
     {item.data.creator.avatarUrl}}"></image>
                <text class="nickName">{
   {item.data.creator.nickname}}</text>
                <view class="comments_praised">
                    <text class="item">
                        <text class="iconfont icon-weiguanzhu"></text>
                        <text class="count">{
   {item.data.praisedCount}}</text>
                    </text>
                    <text class="item">
                        <text class="iconfont icon-pinglun"></text>
                        <text class="count">{
   {item.data.commentCount}}</text>
                    </text>
                    <button open-type="share" class="item btn">
                        <text class="iconfont icon-gengduo"></text>
                    </button>
                </view>
            </view>
        </view>
    </scroll-view>

    //  Click video event 
    handlePlay(event){
    
        let vid = event.currentTarget.id;
        if(this.data.preVid == ""){
    
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
    
                preVid: vid
            });
            console.log(vid);
            console.log(this.data.preVid);
            setTimeout(()=>
            {
    
                let video = wx.createVideoContext(this.data.preVid);
                video.play();
            }, 500);
        }else if(vid != this.data.preVid){
    
            let videoContext = wx.createVideoContext(this.data.preVid);
            videoContext.stop();
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
    
                preVid: vid
            });
            setTimeout(()=>
            {
    
                let video = wx.createVideoContext(this.data.preVid);
                video.play();
            }, 300);
        }
    },

20.5 Adjust the video display size and remove the small black boxes on both sides

object-fit： video fit The way , We can choice cover and fill Can Get rid of Small black boxes on both sides .

20.6 Give the video list area a fixed height , Let it scroll down within a certain height .

/*  Video list */
.videoScroll {
    
    /*vh  It stands for   What percentage   Page height */
    /*vw  It stands for   What percentage   Page width */
    height: calc(100vh - 152rpx);  /*152rpx  Namely   Upper navigation bar  +  Bottom below tab  Of  rpx*/
}