微信小程序中的fixed布局 以及video标签添加position:fixed中的坑

2019独角兽企业重金招聘Python工程师标准>>>

微信小程序中不可以直接在video上使用position:fixed;因为这样做其实会导致出现黑框固定，里面视频依然会滚动，解决办法就是在用view吧video包起来，对view使用fixed即可，另外我们微信一般都是从上到下，滚动区域我们可以写成scroll-view，而单位统一为vh即可，页面中的fixed块的height的vh加起来等于100即可，vh是什么，请自行百度

 

这里有一些源码  可以提供fixed布局下的参考 

##########################################################################

// pages/play/play.js

Page({

 

/**

* 页面的初始数据

*/

data: {

"videoUrl": 'http://192.168.0.247:8080/videoResources/syss.mp4',

now_tab: "0",

"show_or_hidden":true,

tabTitle: [

{

"name": "详情"

}

, {

"name": "章节（3）"

}]

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

},

click_tab: function (e) {

this.setData({

now_tab: e.currentTarget.id

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

 

##########################################################################

<view class="video">

<video autoplay="true" controls="controls" src="{{videoUrl}}" ></video>

</view>

 

<view class='tab_container'>

<block wx:for-items="{{tabTitle}}" wx:key="*this">

<view id='{{index}}' class='{{index==now_tab?"tab_title_on":"tab_title"}}' bindtap='click_tab'>{{item.name}}</view>

</block>

</view>

 

<scroll-view class="main" scroll-y="true">

<view hidden='{{!(now_tab==0)}}'>

详情内容

</view>

<view hidden='{{!(now_tab==1)}}'>

章节列表

</view>

 

</scroll-view>

 

<view class='shop'>

<text style='float:left;color:yellow;'>该课程仅对会员开放</text><button style='background:blue;float:right;height:8vh;'>购买</button>

</view>

##########################################################################

page {

overflow-y: none;

height: 100%;

}

 

video {

width: 100%;

height: 100%;

}

 

.video {

position: fixed;

width: 100%;

top: 0;

height: 30vh;

z-index: 999;

background-color: red;

}

 

.tab_container {

position: fixed;

z-index: 2;

display: flex;

height: 8vh;

box-sizing: border-box;

border-bottom: #eaeaea solid 1px;

width: 100%;

background-color: white;

top: 30vh;

}

 

.tab_title {

line-height: 8vh;

flex: 0 0 375rpx;

color: #8a8a8a;

margin-top: 0vh;

text-align: center;

}

 

.tab_title_on {

line-height: 8vh;

flex: 0 0 375rpx;

text-align: center;

color: #5a88ab;

border-bottom: #5a88ab 2px solid;

}

 

.main {

box-sizing: border-box;

height: 53vh;

position: fixed;

bottom: 9vh;

margin: 0;

}

 

.shop {

line-height: 8vh;

width: 100%;

position: fixed;

bottom: 0vh;

text-align: center;

padding:10rpx 10rpx;

box-sizing: border-box;

}

 

转载于:https://my.oschina.net/kaiyuanlong/blog/1623016