码迷,mamicode.com
首页 > 移动开发 > 详细

uniapp nvue 发送信息样式问题

时间:2020-10-18 10:01:49      阅读:22      评论:0      收藏:0      [点我收藏+]

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

  

uniapp nvue 发送信息样式问题

标签:width   scroll   dde   auto   pad   pos   rgb   hid   ext   

原文地址:https://www.cnblogs.com/daifuchao/p/13831928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!