zoukankan      html  css  js  c++  java
  • uniapp nvue 发送信息样式问题

    <template>
    	<view :style="{ 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="{ windowWidth + 'px', height: windowHeight + 'px'}" :src="video" :autoplay="false" :controls="false"></video>
    		<scroll-view scroll-y="true" class="box" :style="{ (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;
    		 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>
    

      

  • 相关阅读:
    Contains Duplicate
    Valid Anagram
    Invert Binary Tree
    Same Tree
    代理模式——java设计模式
    单例模式——java设计模式
    关于春招自己感到很失落这件事
    Collections.sort()中的mergeSort归并排序
    腾讯云搭建日志收集系统
    centos7 mysql
  • 原文地址:https://www.cnblogs.com/daifuchao/p/13831928.html
Copyright © 2011-2022 走看看