微信小程序开发问题收集及解决方案—

@TOC

1、去除页面弹簧效果

关闭页面滚动效果，页面.json文件的disableScroll设置为true，用于禁止页面滚动；
采用scroll-view组件；
scroll-view组件需定高100vh或者用calc计算出高度；
使用scroll-view组件会产生滚动条，是否显示滚动条show-scrollbar因项目而异，大部分情况不需要，所以使用scroll-view组件的时候需考虑这一点，如需清除，有两个办法：
禁用show-scrollbar属性，前提是使用enhanced，使用enhanced属性在页面有多个scroll-view组件或者长内容的时候会有卡顿现象，页面性能会急剧下降！！！；
通过设置父子元素的宽度差异来隐藏滚动条，这个方法比较靠谱；
scroll-view组件内部默认会有弹簧效果，如需清除可以使用enhanced=true、bounces=false两个属性，这个点需注意；

代码

json文件：

"disableScroll": true,

wxml文件：

<scroll-viewscroll-y="{{true}}"class="container"style="height: calc(100vh - {{navBarHeight}}px)"enhancedbounces="{{false}}"show-scrollbar="{{false}}">页面内容
</scroll-view>

enhanced、bounces、show-scrollbar属性及更多属性参考官方文档

1、单行和多行文本省略

单行

width: 200px;
text-overflow: ellipisis;
white-space: nowrap;
overflow: hidden;

多行

display: -webkit-box：将对象作为弹性伸缩盒子模型显示，实现多行文本的前提条件；
-webkit-line-clamp：该属性可以把块容器中的内容限制为指定的行数，必填；
-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式，可选。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

未完待续。。。

微信小程序开发问题收集及解决方案——样式篇相关推荐

微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的. 下面我将从我的实际项目开发过程中碰到 ...
【微信小程序开发】IOS与安卓样式兼容问题
1.margin在IOS中失效在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空DIV控制间距. 2.fixed定位问题整 ...
微信小程序开发之六 —— 数据绑定与列表渲染
文章目录学习前后数据分离数据类型组件属性数据绑定渲染对象类型数据列表渲染 wx:for wx:key 渲染一下电影列表学习前后上一篇:微信小程序开发之五 -- 体验WeUI 下一篇:微 ...
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案参考文章: (1)关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案 (2)https://www.cnblog ...
微信小程序开发详细步骤解决方案
什么行业适合使用微信小程序? 01. 什么是微信小程序? 微信内嵌的小程序,不需要下载安装就能使用,具有开发成本低.使用方便等特点,它实现了应用"触手可及",用户通过扫描或搜索就能 ...
微信小程序开发提示“获取手机号码失败 ERROR：该appid没有权限”解决方案
关于微信小程序开发提示"获取手机号码失败, ERROR:该appid没有权限"的解决方案一般这种情况的出现都是出现在二次开发上面,原开发人员变动,不在开发该程序.新人在接手这个程 ...
微信小程序装修解决方案ppt_微信小程序开发教程.ppt
微信小程序开发教程.ppt 从开发CMS系统学起从入门到精通的微信小程序开发教程学微信小程序开发从实践中学习是开发者最好最快的学习方法.本教程将和大家从零开始一步一步搭建微信小程序CMS系统, ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...

微信小程序开发问题收集及解决方案——样式篇

1、去除页面弹簧效果

代码

1、单行和多行文本省略

微信小程序开发问题收集及解决方案——样式篇相关推荐

最新文章

热门文章