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>
    

      

  • 相关阅读:
    C# 操作配置文件
    C# Excel操作类
    没有找到 mspdb100.dll 的解决办法
    工厂方法模式
    .Net互操作2
    The certificate used to sign “AppName” has either expired or has been revoked. An updated certificate is required to sign and install the application解决
    手机抓包xcode自带命令行工具配合wireshark实现
    expecting SSH2_MSG_KEX_ECDH_REPLY ssh_dispatch_run_fatal问题解决
    使用ssh-keygen设置ssh无密码登录
    远程复制文件到服务器
  • 原文地址:https://www.cnblogs.com/daifuchao/p/13831928.html
Copyright © 2011-2022 走看看