微信小程序中的fixed布局 以及video标签添加position:fixed中的坑
2018-02-23 00:00
483 查看
微信小程序中不可以直接在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;
}
这里有一些源码 可以提供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;
}
相关文章推荐
- 微信小程序实现动态添加标签(1)
- 微信小程序添加视频video组件
- 微信小程序map、video、canvas地图组件添加覆盖物
- 微信小程序添加视频video组件
- 微信小程序view标签以及display:flex的测试
- 微信小程序第三天(布局:栅格布局)
- CSS中div布局position以及水平居中
- 微信小程序中布局使用的css布局语法
- C#隐藏其他程序窗口以及添加最小化/最大化按钮
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
- 微信小程序 在Chrome浏览器上运行以及WebStorm的使用
- 微信小程序开发:Flex布局
- 微信小程序css篇----定位(position)
- 【微信小程序教程】点击按钮移动view标签的位置
- 微信小程序对地图上的控件进行布局
- 解决 “ie6 position:fixed定位”以及 “ 悬浮的元素会出现振动”
- 微信小程序例子——添加手机联系人
- 流式布局FlowLayout以及动态添加Item的实现
- 微信小程序之添加新界面