0
点赞
收藏
分享

微信扫一扫

mpvue小程序中使用i-drawer组件

左小米z 2022-10-28 阅读 86


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

1.组件配置和引用:

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

mpvue小程序中使用i-drawer组件_ico

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

mpvue小程序中使用i-drawer组件_html_02

(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

<!-- 左边抽屉 -->
<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.效果:

mpvue小程序中使用i-drawer组件_ico_03

mpvue小程序中使用i-drawer组件_html_04

3.就这些吧

举报

相关推荐

0 条评论