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. kmp基础 ekmp

    +]; int lenp,lens; +];//可以是char 也可以是string +]; void getnext() { nex[]=-; ,j=; ) { ||p[j]==p[k]) nex[ ...

  2. Git rebase命令实战

    一.前言 一句话,git rebase 可以帮助项目中的提交历史干净整洁!!! 二.避免合并出现分叉现象 git merge操作 1.新建一个 develop 分支   2.在develop分支上新建 ...

  3. 使用element-ui table expand展开行实现手风琴效果

    写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果. 效果前瞻: 官网table expand地址:http://element-c ...

  4. Meet Hadoop

    全书目前刚看到3.2,博客进度会慢一些,很多问题和例子需要操作一遍才能弄清楚. Why Hadoop 解决的问题 Hadoop的优势 小黄象Hadoop? 学习路线 简单总结 Why Hadoop 解 ...

  5. js变量和函数声明的提升

    函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 请注意,变量赋值并没有被提升,只是声明被提升了. 函数的声明比变量的声明具有高的优先级. 下面的程序是什么结果? var foo =  ...

  6. Android应用源码 概览

    之前我讲过关于Android应用源码的使用,不要走弯路,没有用的源码不要深究. 记住目录就好. 这里还有很多源码, Javaapk这个网站里的.还有很多. 这些源码 有可能有用. 但是不必故意用它. ...

  7. LeetCode(485. 最大连续1的个数)

    问题描述 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意: ...

  8. RbbitMQ 的 python 实现方法

    RbbitMQ(消息队列) #简单模式 服务端 import pika #连接 connection = pika.BlockingConnection(pika.ConnectionParamete ...

  9. 1084: 开心的小明(dengdengoj)

    题目描述 小明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N 元钱就行”.今 ...

  10. shell脚本使用技巧2

    0--stdin标准输入 1--stdout标准输出 2--stderr标准错误 重定向 echo "this is a good idea " > temp.txt tem ...