草庐IT

微信小程序中 Vant DropdownMenu 下拉菜单组件穿透问题

VantDropdownMenu下拉菜单组件穿透问题问题描述在微信小程序中使用Vant组件库提供的DropdownMenu下拉菜单组件时,当内容超过一定高度时,随着页面内容部分的滚动,顶部会出现部分间隙,继续划动会导致底层页面的滚动,这就是滚动穿透。问题复现解决方案(禁止滚动穿透)DropdownMenu下拉菜单组件内部结合了Popup弹出层组件。目前,Popup组件可以通过lock-scroll属性处理部分滚动穿透问题。但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。不过,Vant组件为开发者提供了一个推荐方案以完整解决滚动穿透:page-meta当小程序基础库最低版本在2.9.0以上时

vue2 vant-ui 实现搜索过滤、高亮功能

前言回顾之前,使用cube-ui实现公司售后部门方便查看公司产品状态及配置设备的一个移动端项目,其中有个小功能cube-ui实现搜索过滤、高亮功能。cube-ui实现搜索过滤、高亮功能地址,如何呢,售后开始搞事了,说这个功能不好用什么的,不能粘贴啥的(因为我设置了点击就弹让他选的),说要换个UI,说这UI不好用。一、需求流程需求还是一样,只是ui变了,逻辑也会变点实现效果原效果:现效果:差别:其实效果没多大变化,只是更换了UI和选择框标题修改为输入框功能实现概述:vant实现是通过输入框(van-field)事件触发弹出层(van-popup),弹出层(van-popup)中包括了选择器(va

vue2 vant-ui 实现搜索过滤、高亮功能

前言回顾之前,使用cube-ui实现公司售后部门方便查看公司产品状态及配置设备的一个移动端项目,其中有个小功能cube-ui实现搜索过滤、高亮功能。cube-ui实现搜索过滤、高亮功能地址,如何呢,售后开始搞事了,说这个功能不好用什么的,不能粘贴啥的(因为我设置了点击就弹让他选的),说要换个UI,说这UI不好用。一、需求流程需求还是一样,只是ui变了,逻辑也会变点实现效果原效果:现效果:差别:其实效果没多大变化,只是更换了UI和选择框标题修改为输入框功能实现概述:vant实现是通过输入框(van-field)事件触发弹出层(van-popup),弹出层(van-popup)中包括了选择器(va

HBuilder创建uniapp项目(Vue3、Vant Weapp)

一、准备工作    1.下载HBuilder——uni-app(https://uniapp.dcloud.io/)    2.下载微信开发者工具:        https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html二、创建项目    1.在点击工具栏里的文件->新建->项目:    2.选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。选择Vue对应的开发版本    3.运行到微信开发者工具,其他的运行方法可以参考官方文档注意:第一次运行的时候需要配置微信开发者工具所在位置:    

手机/移动端的UI框架-Vant和NutUI

下面推荐2款手机/移动端的UI框架。其实还有很多的框架,各个大厂都有UI框架。目前,找来找去,只有腾讯的移动端是setup语法写的TDesign,其他大厂,虽然都是VUE3写的,但是都还未改成setup的语法,而且,腾讯的版本也比较新,所以暂时不做案例了。我们使用成熟的UI框架Vant和NutUI来演示。其中京东的NutUI组件,还有小程序组件。目录一、Vant二、NutUI一、Vant官网,Vant4-Alightweight,customizableVueUIlibraryformobilewebapps.,多的不说了,可以看官网介绍,下面我们直接创建程序。1.我们使用HBuilderX创

Vue搭建移动端h5项目(已开源,附带git地址)Vant+Vue Router+Vuex+axios封装+案例交互+部分代码说明

一、项目介绍以及项目地址             项目介绍:vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配;通过Vantui作为项目的组件库;通过Vuex管理数据状态,进行模块化管理;通过VueRouter配置项目路由,进行模块化管理;封装axios进行数据的请求,以及一些页面逻辑的交互和简单的代码说明。    项目地址:h5-vant    联系博主:如有问题可联系博主=》QQ:1596892941 VX:weiyi1596892941    项目说明:如果项目需要直接拿去用,如果想研究一下就向下观看。如果有其他想法请留言或者联系我(期待大家提

uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)

theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目(如命令行创建失败,请直接访问gitee下载模板)npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下(uview框架不支持vue3)运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用,打包发布同样Hubil

uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)

theme:smartbluehighlight:dark创建项目创建后的项目此处插入一个坑亦可以使用uniappvue-cli创建项目vuecreate-pdcloudio/uni-preset-vuemy-project使用vue3/vite创建项目(如命令行创建失败,请直接访问gitee下载模板)npxdegitdcloudio/uni-preset-vue#vitemy-vue3-project创建后的目录如下(uview框架不支持vue3)运行项目使用yarndev:mp-weixin打开小程序开发工具引入打包后的dist包下weixin包即可在开发工具中使用,打包发布同样Hubil

uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)

1.先在根目录创建wxcomponents文件夹2.打开https://github.com/youzan/vant-weapp下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉,然后把vant-weapp放到wxcomponents里面4.在App.vue引入vant样式@import'/wxcomponents/vant-weapp/dist/common/index.wxss'5.然后在pages.json引入(局部引入)"usingComponents":{             "van-button":"/wxcompon

uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)

1.先在根目录创建wxcomponents文件夹2.打开https://github.com/youzan/vant-weapp下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉,然后把vant-weapp放到wxcomponents里面4.在App.vue引入vant样式@import'/wxcomponents/vant-weapp/dist/common/index.wxss'5.然后在pages.json引入(局部引入)"usingComponents":{             "van-button":"/wxcompon