uni-app 10.3个人设置页开发操作菜单

Posted 2019ab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 10.3个人设置页开发操作菜单相关的知识,希望对你有一定的参考价值。

主页面代码 user-base.nvue

	<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar showBack :showRight="true" bgColor="bg-white">
			<free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&#xe6fd;</text></free-icon-button>
		</free-nav-bar>
		<view class="px-3 py-4 flex align-center bg-white border-bottom"> 
			<free-avatar src="/static/images/demo/demo6.jpg" size="120"></free-avatar>
			
			<view class="flex flex-column ml-3">
				<text class="font-lg font-weight-bold mb-2">昵称</text>
				<text class="font-md text-light-muted mb-1">账号:VmzhbjzhV</text>
				<text class="font-md text-light-muted">地区:广东广州</text>
			</view>
		</view>
		
		<free-list-item showRight :showLeftIcon="false">
			<view class="flex align-center">
				<text class="font-md text-dark mr-3">标签</text>
				<text class="font-md text-light-muted">哈哈</text>
			</view>
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item showRight :showLeftIcon="false">
			<view class="flex align-center">
				<text class="font-md text-dark mr-3">朋友圈</text>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
				<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
			</view>
		</free-list-item>
		<free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item>
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
			<text class="iconfont text-primary mr-1">&#xe64e;</text>
			<text class="font-md text-primary">发信息</text>
		</view>
		
		<!-- 扩展菜单 -->
		<free-popup ref="action" bottom transformOrigin="center bottom" maskColor>
			<scroll-view style="height: 580rpx;" class="bg-white" :show-scrollbar="false">
				<free-list-item v-for="i in 10" title="投诉" :showRight="false" :border="false">
					<text slot="icon" class="iconfont font-lg py-1">&#xe86d;</text>
				</free-list-item>
			</scroll-view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeChatItem from '@/components/free-ui/free-chat-item.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	
	export default {
		components: {
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeListItem,
			freeDivider,
			freeAvatar
		},
		data() {
			return {
				
			}
		},
		methods: {
			openAction(){
				this.$refs.action.show()
			}
		}
	}
</script>

<style>

</style>

页面是酱紫的


感谢大家观看,我们下次见。

以上是关于uni-app 10.3个人设置页开发操作菜单的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 10.1个人设置页开发

uni-app 7个人中心页开发

uni-app 18个人资料设置开发

uni-app全栈仿微信开源项目系列

uni-app 中如何实现上滑分页和下拉刷新

uni-app 21公共搜索页开发