微信小程序开发注意事项总结:上拉加载失效、转义字符等
1、上拉加载失效
问题背景:部分页面上拉加载失效。当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因。
解决问题:
在小程序中,官方为我们提供了原生的下拉刷新和上拉加载,只需要进行简单的配置即可实现下拉刷新的功:onPullDownRefresh、
onReachBottom
除此之外,还可以使用 scroll-view 组件来实现这两个功能,利用scroll-view的bindscrolltolower、bindscrolltoupper事件
<scroll-view
style="height: {{scrollHeight}}px;"
enable-back-to-top
bindscrolltolower="loadMore"
bindscrolltoupper="refreshData">
</scroll-view>
2、小程序不能使用层级选择器。
3、在 wxss 不能使用背景图片,需要使用 image 组件引入图片。
微信小程序css设置本地背景图片
微信小程序中,直接在css中直接使用本地图片为view设置背景图片,如
.box1{
background-image: url(../../image/alltest_bag.jpg);
}
会出现如下问题,会报错:pages/allTest/allTest.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。
微信小程序不能用CSS的方法加载本地图片,比如background-url(),除非你把本地图片base64化,否则只能够用image组件。如果想将图片作为背景,而且上面排列其他的一些组件的话,需要使用定位布局了。
解决方案:1、图片转为base64;2、使用image组件,然后使用定位布局
4、wxml中不能直接插入转义字符,比如 \n,需要使用在 text 组件中使用。
5、web-view的使用
微信小程序不支持原生页面跳转,包括 html 和 js,
若要跳转小程序应用内页面,需要使用 wx.navigateTo(OBJECT),详见 wx.navigateTo API。
若要跳转 H5 页面,就需要用到 web-view 组件了。web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。
<web-view src="{{url}}"></web-view>
web-view指向的 H5 链接必须要在小程序后台配置白名单。若要实现动态跳转,只需要动态传参到 web-view 所在页面就可以了。
6、自定义组件里面无法使用icon,需要用image
7、文本实现两端对齐
文本实现两端对齐,大多人都知道text-align:justify;
实际上,写这句在小程序端真的没有两端对齐的效果。
需要加上:text-align-last: justify;才能实现两端对齐
8、域名不在配置的白名单里的问题
开发者工具——详情——本地配置——不校验合法域名...HTTPS证书勾选上即可
微信小程序开发注意事项总结:上拉加载失效、转义字符等的更多相关文章
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 微信小程序开发--模板(template)使用,数据加载,点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
- 微信小程序开发——设置默认图片、错误加载图片
小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- 微信小程序开发注意事项
1.小程序方法是异步的,开发过程要注意此点,避免在需要同步执行过程中的错误,尤其是在app.js处理登入的时候要特别注意. 2.小程序api.组件依赖微信的版本,注意版本的兼容,可以通过版本判断当前的 ...
- 微信小程序开发注意事项(优化项)
最近公司有一个小程序开发项目,自己也自学了不少,有一些开发小心得,记录在这里. 小程序开发中注意: 1,setData 小程序视图层和逻辑层在两个独立的模块,并不具备数据直接传递的,setData相当 ...
- 微信小程序 在使用wx.request时显示加载中
微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...
- 微信小程序 - 为何setData到页面上有的加分号
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { let _page = t ...
随机推荐
- Codeforces 1144G Two Merged Sequences dp
Two Merged Sequences 感觉是个垃圾题啊, 为什么过的人这么少.. dp[ i ][ 0 ]表示处理完前 i 个, 第 i 个是递增序列序列里的元素,递减序列的最大值. dp[ i ...
- Codeforces 1019C Sergey's problem 构造
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1019C.html 题目传送门 - CF1019C 题意 给定一个有 $n$ 个节点 . $m$ 条边的有向 ...
- js隐藏元素
js隐藏元素 $("#serviceType").css('display','none'); js显示元素 $("#serviceType3").css('d ...
- HBase的概述和安装部署
一.HBase概述 1.HBase是Hadoop数据库,是一个分布式.可扩展的大数据存储. HBase是用于对大数据进行随机.实时读写访问的非关系型数据库,它的目标托管非常大的表——数十亿行N百万列. ...
- jOOR
--摘自<android插件化开发指南> 1.jOOR库就一个Reflect.java类很重要 2.Reflect.java包括6个核心方法 1)on:包裹一个类或者对象,表示在这个类或对 ...
- POJ 1459 - Power Network 【Ek-最大流】
<题目链接> 题目大意:给出 n 个点,其中包括 np个发电站,nc 个消费者, 剩下的全部都是中转点,再给出 这些点中的m 条边,代表这两点间的最大传输电量,并且给出发电站的最大发送电量 ...
- 笔记-JS高级程序设计-BOM篇
BOM提供了很多对象,用于访问浏览器的功能.这些功能与任何网页无关. 1BOM的核心对象是window,它代表浏览器的一个实例,它是通过JS访问浏览器窗口的一个借口,同时又是ECMAScript规定的 ...
- Java 浮点数精度丢失
Java 浮点数精度丢失 问题引入 昨天帮室友写一个模拟发红包抢红包的程序时,对金额统一使用的 double 来建模,结果发现在实际运行时程序的结果在数值上总是有细微的误差,程序运行的截图: 输入依次 ...
- SpringBoot使用Mybatis-Generator
本文介绍如何将Maven和Mybatis-Generator配合使用. 简介 Mybatis-Generator是Mybatis提供的一个便捷型插件,自动可以为项目生产对应的实体类,Mapper,da ...
- 鼠标hover时图片效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...