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证书勾选上即可

微信小程序开发注意事项总结:上拉加载失效、转义字符等的更多相关文章

  1. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  2. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  3. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  4. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  5. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  6. 微信小程序开发注意事项

    1.小程序方法是异步的,开发过程要注意此点,避免在需要同步执行过程中的错误,尤其是在app.js处理登入的时候要特别注意. 2.小程序api.组件依赖微信的版本,注意版本的兼容,可以通过版本判断当前的 ...

  7. 微信小程序开发注意事项(优化项)

    最近公司有一个小程序开发项目,自己也自学了不少,有一些开发小心得,记录在这里. 小程序开发中注意: 1,setData 小程序视图层和逻辑层在两个独立的模块,并不具备数据直接传递的,setData相当 ...

  8. 微信小程序 在使用wx.request时显示加载中

    微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...

  9. 微信小程序 - 为何setData到页面上有的加分号

    Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { let _page = t ...

随机推荐

  1. Codeforces 1144G Two Merged Sequences dp

    Two Merged Sequences 感觉是个垃圾题啊, 为什么过的人这么少.. dp[ i ][ 0 ]表示处理完前 i 个, 第 i 个是递增序列序列里的元素,递减序列的最大值. dp[ i ...

  2. Codeforces 1019C Sergey's problem 构造

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1019C.html 题目传送门 - CF1019C 题意 给定一个有 $n$ 个节点 . $m$ 条边的有向 ...

  3. js隐藏元素

    js隐藏元素 $("#serviceType").css('display','none'); js显示元素 $("#serviceType3").css('d ...

  4. HBase的概述和安装部署

    一.HBase概述 1.HBase是Hadoop数据库,是一个分布式.可扩展的大数据存储. HBase是用于对大数据进行随机.实时读写访问的非关系型数据库,它的目标托管非常大的表——数十亿行N百万列. ...

  5. jOOR

    --摘自<android插件化开发指南> 1.jOOR库就一个Reflect.java类很重要 2.Reflect.java包括6个核心方法 1)on:包裹一个类或者对象,表示在这个类或对 ...

  6. POJ 1459 - Power Network 【Ek-最大流】

    <题目链接> 题目大意:给出 n 个点,其中包括 np个发电站,nc 个消费者, 剩下的全部都是中转点,再给出 这些点中的m 条边,代表这两点间的最大传输电量,并且给出发电站的最大发送电量 ...

  7. 笔记-JS高级程序设计-BOM篇

    BOM提供了很多对象,用于访问浏览器的功能.这些功能与任何网页无关. 1BOM的核心对象是window,它代表浏览器的一个实例,它是通过JS访问浏览器窗口的一个借口,同时又是ECMAScript规定的 ...

  8. Java 浮点数精度丢失

    Java 浮点数精度丢失 问题引入 昨天帮室友写一个模拟发红包抢红包的程序时,对金额统一使用的 double 来建模,结果发现在实际运行时程序的结果在数值上总是有细微的误差,程序运行的截图: 输入依次 ...

  9. SpringBoot使用Mybatis-Generator

    本文介绍如何将Maven和Mybatis-Generator配合使用. 简介 Mybatis-Generator是Mybatis提供的一个便捷型插件,自动可以为项目生产对应的实体类,Mapper,da ...

  10. 鼠标hover时图片效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...