标签:width scroll dde auto pad pos rgb hid ext
<template>
<view :style="{width: windowWidth + ‘px‘, height: windowHeight + ‘px‘, ‘background-color‘: ‘#000‘}">
<view class="goback" @click="goback" :style="{top: (statusBarHeight + 10) + ‘px‘}">
<uni-icons type="arrowleft" size="16"></uni-icons>
</view>
<video :style="{width: windowWidth + ‘px‘, height: windowHeight + ‘px‘}" :src="video" :autoplay="false" :controls="false"></video>
<scroll-view scroll-y="true" class="box" :style="{width: (windowWidth - 100) + ‘px‘}">
<view class="item" v-for="(i, k) in items">
<rich-text class="node" :nodes="i | node" ></rich-text>
</view>
</scroll-view>
</view>
</template>
<script>
var app = getApp()
var self
export default {
data() {
return {
statusBarHeight: 0,
windowWidth: 0,
windowHeight: 0,
video: ‘http://huiketang-app.oss-cn-chengdu.aliyuncs.com/app/book/1600930349671_529.mp4‘,
items: []
}
},
filters: {
node (val) {
return [{
name: ‘div‘,
attrs: {
style: ‘color: #fff‘
},
children: [{
name: ‘span‘,
attrs: {style: ‘color:#f60‘},
children: [
{
type: ‘text‘,
text: val.title + ‘: ‘
}
]
},
{
type: ‘text‘,
text: val.text
}
]
}]
},
},
onLoad() {
self = this
/*长宽播放,加返回按键*/
var systemInfo = uni.getSystemInfoSync()
self.statusBarHeight = systemInfo.statusBarHeight
self.windowWidth = systemInfo.windowWidth
self.windowHeight = systemInfo.windowHeight
for(var i = 0; i< 10; i++) {
self.items.push({title: `名字名字名字${i}`, text: ‘内容内内容内容容内容内容内容内容内容内容内容内容内容内容内容内容‘})
}
},
onReady() {
},
onUnload() {
},
methods: {
/*goback*/
goback() {
uni.navigateBack()
}
}
}
</script>
<style>
.goback {
position: fixed;
background-color: rgba(255, 255, 255, 0.4);
z-index: 991;
width: 26px;
height: 26px;
border-radius: 50%;
left: 15px;
justify-content: center;
align-items: center;
padding-right: 2px;
}
.box {
position: absolute;
z-index: 990;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-radius: 5px;
bottom: 30px;
left: 10px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.6);
height: 200px;
}
.item {
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.6);
margin-bottom: 10px;
border-radius: 4px;
position: relative;
}
.node {
position: relative;
top:-10px;
font-size: 14px;
line-height: 20px;
background-color: rgba(0,0,0,0);
padding-left: 5px;
padding-right: 5px;
}
</style>
标签:width scroll dde auto pad pos rgb hid ext
原文地址:https://www.cnblogs.com/daifuchao/p/13831928.html