小程序scroll设置(滚动轴样式、真机测试不能滑动)
一、先说scroll真机测试不能滑动的问题
1、我做的项目是公司的一个小程序商城。产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求。要不是因为她比我重,我早就打她了。我本来已经做好了一个点击购买按钮弹出商品规格选项。本来规格不多,非要改成scroll的mmp,我就开始搞了
2、我用的是微信官方推荐的方式:使用方法具体的可直接到微信小程序开发文档中找到
<view><scroll-view scroll-y="{{true}}">// 这行代码catchtouchmove='noMove',是我做时间选择的时候时间上带的<view catchtouchmove='noMove'>我是scroll里面可以滚动的的内容<picker-view>我是时间选择器,也在scroll里面<pick-view></view></scroll-view>
</view>
在微信开发者工具上完美运行,没有任何bug!漂亮!完美!开始划水!
然后我就上传到测试服务器了,傻眼了。不能滚动。
打开调试工具开始找bug
是的就是这块,也就是我上面代码块里写的那样。本来这个catchtouchmove=noMove是为了让picker选择时间滚动用的。但是picker现在在scroll里面,而scroll里面有了两个 catchtouchmove,而他只执行了最后一个,导致冲突,第一个无法执行,滑动不成功。其实console里面一直在报了这个错误,我没注意。最后让老大发现了这个错误。当解决这个错误后,突然发现真机模式下也能滚动了。
其实我想说的是,前端真的要多看控制台的每一条记录,说不定就有决方案
bl的源地址:
https://www.bilibili.com/video/BV1Z64y1F7Af/
放一个修改成功之后的小视频:
小程序scroll弹窗滚动条
二、在设置滚动轴的时候,小视频上可以看出,样式做了修改,主要原因还是因为滚动轴不能用,又没有发现什么好用的方法,就开始在滚动轴上下功夫了,然后我就找到了一下解决方案
放一下样式代码:
wxml:
<scroll-view class='picker_scroll'>我是scroll里面的内容
</scroll-view>
wxss:
//不加class前缀的话,整个页面所有带scroll的标签的样式都会改变
.picker_scroll ::-webkit-scrollbar
{// scroll上下滚动的宽度width: 60rpx;// scroll左右滚动的宽度height: 60rpx; color: #F06A20;
}
/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track
{
// scroll滚动条背景的颜色
-webkit-box-shadow: inset 0 0 20rpx rgba(0,0,0,0.3);
border-radius: 20rpx;
background-color: #ffffff;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 20rpx;
scroll滚动滑块的颜色
-webkit-box-shadow: inset 0 0 20rpx rgba(240,106,32,0.7);
background-color: rgba(240,106,32,0.8);
}
总结:做事情一定要认真啊,还有就是产品,你能不能不要瞎提要求,改一下很麻烦的,况且没有原型图的情况下
小程序scroll设置(滚动轴样式、真机测试不能滑动)相关推荐
- 微信小程序本地电脑tomcat启服务,真机测试实现
最近开发小程序,小程序真机请求只支持https.开发中想实时的预览开发成果,就需要在本地配置域名的ssl证书,最后实现手机和电脑在同一局域网下就可以实现真机测试本地启的项目.(我在公司测试手机电脑都连 ...
- 微信小程序开发之音乐播放器 真机测试 audio API
简单的试了试播放器,还是有不少坑的.开始在模拟器上跑,一直没有声音,总是刚开始播放就暂停.做个笔记. 准备资源: 音乐图片地址:http://ac-5g9r20ds.clouddn.com/63bed ...
- 记一次小程序接口本地可访问,真机不能访问的问题
先说结论:如果小程序访问的域名接口,各种配置没问题,本地可以访问,真机调试不通,那很大可能是服务器域名https的 配置有问题 确定以下内容: 小程序后台–开发管理–开发设置配置了接口的域名(http ...
- uni-app 快手小程序如何设置跟元素样式
首先判断是否为快手小程序 /* #ifdef MP-KUAISHOU */ 如果是快手小程序 则该部分代码块生效 /* #endif */ 使用元素选择器 + 属性选择器获取根标签 /* #ifdef ...
- [超详细]微信小程序使用iconfont教程及解决真机无法显示问题
1.在iconfont官网创建自己的项目 选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目. 2.把我的项目下载到本地,复制小程序项目中并引用 我的项目入 ...
- 微信小程序自动化测试全流程(安卓真机+Appium)
一.连接手机 1.手机设置成开发者模式(我用的oppo,所以是设置-关于手机-三击"版本号",开发者模式打开) 2.开启USB调试(设置-其它设置-开发者选项-USB调试打开,最好 ...
- 小程序开发版只能自己微信真机调试,别人微信步行,小程序开发版如何提供给测试人员测试
今天项目基本上完结了,接口也都调完了.自测的时候想用不统计机型多个微信号登录同时测试观察机型表现.结果发现为什么我的账号可以访问到小程序,别人的不可以.然后就按照标题类似的方式百度,发现并没有多少帖子 ...
- 微信小程序调试模式请求失败,真机模式、调试带控制台模式却都成功
微信小程序预览模式和真机调试模式和带控制台信息的预览模式 微信小程序的双缝干涉问题 微信小程序的双缝干涉问题 最近在项目中碰到了一个BUG. 测试时候发现真机调试和预览模式中居然不一样,这种情况其实也 ...
- 微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
最新文章
- blender硬表面建模渲染终极教程
- 饿了么交付中心语言栈转型总结
- Mysql 安装服务无法启动解决方案与使用的一般使用指令
- 数据结构实验之链表五:单链表的拆分_JAVA
- Spring(十二)之JDBC框架
- python单元测试之unittest框架使用
- 用C语言设置程序开机自启动
- 苹果CMSv10自适应高权重模板源码
- python的read函数调用报错_从零开始学Python(七):文件存储I/O流和异常捕捉
- linux系统安装redis,外部无法访问
- bootstrap-table初始化配置
- java le下载安装_JCreator LE
- cad2016中选择全图字体怎么操作_PPT有哪些可以一劳永逸的操作?
- spss可以关键词词频分析吗_词频分析研究的现状、方法及工具,你值得拥有
- tensorflow-ckpt2npy
- 中国著名画家司志明画伟人获全国画界称赞,单幅被拍出65万
- ipad和android平板应用,排名前100的iPad应用中只有一半支持Android平板
- python的docx库使用教程
- Android使用SoundPool播放音效实例详解
- CMD命令行下如何切换路径