07 文本域+底部操作条组件开发

07 文本域+底部操作条组件开发

一 文本域

<!-- 文本域 -->                                                 // 包含横向铺满屏幕
		<textarea v-mod el="content" placeholder="说一句话吧" class="uni-textarea px-2"/>

二 地步操作条组件开发

关注点：看注释底部操作条和style

<template>
	<view>
		<!-- 自定义导航条 -->
		<uni-nav-bar left-icon="back" :border="false" :statusBar="true" @clickLeft="back" >
			<view class="flex align-center justify-center w-100">
				<text class="font">所有人可见</text><text class="iconfont icon-shezhi ml-1"></text>
			</view>
		</uni-nav-bar>
		<!-- 文本域 -->
		<textarea v-mod el="content" placeholder="说一句话吧" class="uni-textarea px-2"/>
		
		<!-- 底部操作条 -->
		<view class="fixed-bottom bg-white flex align-center" style="height: 85rpx;"> 
			<view class="iconfont icon-caidan footer-btn animated " hover-class="jello"></view>
			<view class="iconfont icon-huati footer-btn animated " hover-class="jello"></view>
			<view class="iconfont icon-tupian footer-btn animated " hover-class="jello"></view>
			<!-- 小点  当一行flex元素作用浮动可以使用margin-right 或者 margin-left 靠左或者靠右边 -->
			<view class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animated" hover-class="jello" style="width: 140rpx;height: 60rpx;">发送</view>
		</view>

	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
.footer-btn{
	height:86rpx;
	width:86rpx;

	display:flex;
	justify-content: center;
	align-items:center;
	font-size:50rpx;
	
}

</style>

三 要点

flex下实现左右浮动：

1 字元素可以利用 margin-right：auto 或margin-lift：auto来实现左右浮动。

view里面放设置class 里面图标相当于view里面夹着字