uniapp
文章平均质量分 64
Boo_crob
这个作者很懒,什么都没留下…
展开
-
商品详情页的级联滚动
实现效果:点击tab中的选项,页面上下滚动到指定位置页面滚动的指定位置,tab也选中指定的选项解决思路:先给指定的位置,各添加一个唯一id,(方便后续使用 uni.createSelectorQuery().select(’#’+that.idname).boundingClientRect(function(res) 定位到我要的id位置),并在data添加一个idname变量比如说我的样式代码//这里是我的tabs切换选项卡 current双向绑定当前所在下标 , tabChan原创 2021-08-13 15:33:10 · 1261 阅读 · 0 评论 -
解决uni-app 底部输入框,键盘弹起时页面整体上移 问题
我在聊天系统和评论区域都遇到过 软键盘把页面顶上去的问题,做聊天系统的时候废了牛鼻子劲才解决页面上移问题,这次做评论功能的时候又遇到了,我觉得以前的方法太麻烦了,想找一个简单的方法,仔细翻读uniapp文档的时候发现了一个属性adjust-position :Boolean类型,作用是键盘弹起时,是否自动上推页面来源,uniapp官方文档发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize这个softin原创 2021-08-13 13:59:40 · 14053 阅读 · 1 评论 -
app中,实现下滑页面到一定高度,显示自定义导航栏
在uniapp官方文档的框架中有关于页面的生命周期 找到onPageScroll 生命周期,他的一个参数是scrollTop,即页面垂直方向已滚动的距离(单位px)逻辑处理过程是:先定义一个布尔类型的变量,来控制自定义导航栏的显示与隐藏,当垂直方向页面滚动到一定高度(这里设滚动到100px时)后,即大于100px,则显示自定义导航栏,否则,隐藏导航栏。//在data中定义布尔类型变量data() { return { isShowNav: false, }},//页面的生命周期onPa原创 2021-07-06 17:36:01 · 1622 阅读 · 0 评论 -
uniapp中引用echarts图表
uniapp中使用echart图表参考文档: 花归去 https://blog.csdn.net/weixin_42120669/article/details/106123645文章里的内容超级详细,请认真阅读哦!其中,关于echarts.min.js存放位置,作者建业放在static,如果你们想放在别的地方也是可以的,只要更改页面代码中的echarts.min.js的位置就行!!!!散会!!!!!!!!!!!!...转载 2021-07-06 17:13:26 · 688 阅读 · 0 评论 -
基于uniapp做的聊天系统中,使用scroll-view实现下拉加载查看消息记录
关于这个下拉加载查看消息记录,我尝试了很多方法。下面我来理理有过的想法思路1.我查找uniapp官网,找到有一个生命周期类型的方法,叫:onPullDownRefresh() ,比如一次读取10条消息记录,而我的页面只能显示五条,当我读完第十条消息想要下拉加载信息的时候,发现加载的消息会跳转至第20条消息,以至于我的消息不是紧接着我上一条读的信息,这样就给用户带来极差的体验感。思路2:想用onPullDownRefresh() 结合 跳转至指定消息下标 一起使用。比如说,我想让其每次下拉加载都跳转至第.原创 2021-05-11 18:19:35 · 7105 阅读 · 23 评论 -
基于uniapp做的聊天系统中,使用scroll-view实现动态滚动到最底部
这里提到两个方法方法一:用整个scroll-view的高度减去所有聊天内容的高度,得到的就是滚动条需要下拉的距离,即可使聊天页下拉至最底部。参考文章:《uni-app 之 聊天室滚到最底部》方法二:利用uniapp中的scroll-view组件的scroll-into-view属性 具体使用方法请参考官网文档第一种方法:将聊天框封装成组件,并判断是谁发送的信息首先要给聊天内容部分封装成一个组件(不封装也可以),将组件中的对方和自己用v-if做一个判断,当接收的用户名(或者id,只要是唯一.原创 2021-04-30 18:33:22 · 10560 阅读 · 2 评论 -
upload上传图片之上传多张图片和上传一张图片
前言 上传仅能上传一张和上传多张的区别不仅仅在于数量,还在于存放上传图片地址的变量。存放一张的变量是字符类型。多张是数组类型。上传一张图片----------------------参数-----------------------action-----------:图片上传地址header----------:上传携带的头信息,对象形式max-count-----:上传的最大数量file-list-----------:默认显示的图片列表,数组元素为对象,必须提供url属性mult..原创 2021-03-06 10:13:04 · 2218 阅读 · 1 评论