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>
		        	<uni-list-item :title="item" v-for="(item,index) in drawerList" :key="index" />		        	
		        </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">
						<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
			}
		},
		methods:{
			openDrawer:function(drawerList,width){
				this.drawerIsShow=true;
				this.drawerList=drawerList;
				this.width=width;
			},
			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;
	}
</style>