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證書勾選上即可