sisMobilePhone/components/drawer/threeLineDrawer.vue

<template>
	<view>
		<!-- 抽屜 -->
		<uni-drawer :visible="drawerIsShow" :width="width" @close="closeDrawer">
		    <view style="padding:0rpx;">
				<view class="picture">
					<image src="../../static/picture/fengji.png" style="width: 100%;height: 200px;"></image>
				</view>
		        <uni-list>
					<view class="list">
										
						<view class="item" v-for="(item,index) in drawerList" :key="index">
							<view class="itemIcon">
								<view class="icon text-black" :class="['cuIcon-' + inconList[index]]" style="font-size: 20px;margin-top: 10px;margin-left: 20px;">
								</view>
							</view>	
							<uni-list-item :title="item" style="margin-left: 40px;"/>
						</view>
						
					</view>
		        			        	
		        </uni-list>
				<view class="cu-bar tabbar bg-white">
					<view class="action">
						<view class="icon cuIcon-repair text-black">
						</view>
						<view class="text-black">设置</view>
					</view>
					<view class="action" style="margin-left: -32px;">
						<view class="icon cuIcon-command text-black">
						</view>
						<view class="text-black">修改密码</view>
					</view>					
				</view>
		    </view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/uni-drawer/uni-drawer.vue"
	import uniList from '@/uni-list/uni-list.vue'
	import uniListItem from '@/uni-list-item/uni-list-item.vue'
	import uniIcons from '@/uni-icons/uni-icons.vue'
	export default{
		components: {
			uniDrawer,
			uniList,
			uniListItem,
			uniIcons
		},
		data:function(){
			return{
				drawerIsShow:false,
				drawerList:[],
				width:250,
				inconList:[]
			}
		},
		methods:{
			openDrawer:function(width,drawerList,inconList){
				this.drawerIsShow=true;
				this.drawerList=drawerList;
				this.width=width;
				this.inconList=inconList;
			},
			closeDrawer:function(){
				this.drawerIsShow=false;
			}
		}
	}
</script>

<style>
	.picture{
		width: 100%;
		height: 200px;
	}
	.cu-bar{
		position: fixed;
		top: calc(100% - 50px);
		width: 100%;
	}
	.icon{
		float: left;
	}
	.text-black{
		float: left;
		line-height: 28px;
		font-size: 15px;
	}
	.list{
		width: 100%;
		height: 100%;
	}
	.item{
		width: 100%;
		height: 100%;
		float: right;
		margin-right: 10px;
		/* border-bottom: 1px solid black; */
	}
	.itemIcon{
		width: 20px;
		height: 20px;
		float: left;
	}
</style>