本文共 1748 字，大约阅读时间需要 5 分钟。

小程序具有简洁轻便，无需安装，打开即用的特点；遇到页面查询添加过多而感觉页面混乱，特使用iview-weapph中的i-drawer组件进行重构，既节省了空间又显得页面有条理。实现了如下的完整功能：

1.组件配置和引用：

(1).将iview-weapp的dist文件内容拷贝到static文件夹下的iview备用。文件如下:

(2).进入pages.json文件中（用来配置页面的路由已经引用UI组件等）,pages.json格式如下:

(3).找到你需要引用组件的页面,本地引入iview-weapp的i-drawer、i-button等组件(注意路径)：

"subPackages" : [        {            "root" : "pages/projects",            "pages" : [                {                    "path" : "hotal/index",                    "style" : {						"enablePullDownRefresh" : true,						"onReachBottomDistance": 150,// 页面触底距离 单位为px                        "usingComponents" : {                            "i-tabs" : "/static/iview/tabs/index",                            "i-tab" : "/static/iview/tab/index",							"i-modal": "/static/iview/modal/index",							"i-select": "/static/iview/select/index",							"i-drawer": "/static/iview/drawer/index",							"i-button" : "/static/iview/button/index",							"i-icon": "/static/iview/icon/index"                        }                    }                }            ]        },]

(4).页面中使用：

html

   				
   					
    						
     					
    					
    					    
     
      					        单击遮罩层关闭:							 我是侧边展示内容							 csdn-尔嵘							 csdn-尔嵘                             csdn-尔嵘                             淘宝搜华诚荣邦百货                             淘宝搜华诚荣邦百货                             淘宝搜华诚荣邦百货                             淘宝搜华诚荣邦百货					    
     						
     
      							淘宝搜华诚荣邦百货                            淘宝搜华诚荣邦百货                            淘宝搜华诚荣邦百货                            淘宝搜华诚荣邦百货						
     					
    
   

js

data() {		return {            modeLeft: "left",			showLeft1: false,//抽屉        }        }methods:{    toggleLeft1() {		  this.showLeft1 = !this.showLeft1;    },}

2.效果：

3.就这些吧