Usar el componente i-drawer en el subprograma mpvue

El subprograma es simple y portátil, no necesita ser instalado y está listo para usar. Cuando la consulta de la página se agrega demasiado y la página se siente caótica, el componente i-drawer en iview-weapph se usa para la reconstrucción, que no sólo ahorra espacio pero también parece tener una página. Se realizan las siguientes funciones completas:

1. Configuración y referencia de componentes:

(1) Copie el contenido del archivo dist de iview-weapp en iview en la carpeta estática para hacer una copia de seguridad. Los archivos son los siguientes:

(2). Ingrese el archivo pages.json (la ruta utilizada para configurar la página tiene componentes de UI referenciados, etc.), el formato pages.json es el siguiente:

(3). Busque la página que necesita para hacer referencia a los componentes e importe localmente i-drawer, i-button y otros componentes de iview-weapp (observe la ruta):

"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). Utilizar en la página:

html

<!-- 左边抽屉 -->
				<view class="top" style="position: fixed;top: 40px;left: 0;width: 100%;">
					<i-button @click="toggleLeft1" type="primary" style="width: 30px;">
						<i-icon type="add" />
					</i-button>
					<i-drawer mode="left" :visible="showLeft1" @close="toggleLeft1">
					    <view class="demo-container">
					        单击遮罩层关闭:
							 我是侧边展示内容
							 csdn-尔嵘
							 csdn-尔嵘
                             csdn-尔嵘
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
					    </view>
						<view>
							淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
						</view>
					</i-drawer>

js

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

2. Efecto:

3. Eso es todo