标签: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