微信小程序入坑集锦

前言：前端小白的个人日记整理，记录小程序项目中遇到的坑，整理出来与大家分享，希望对大家有帮助，如有错误的地方，请指正，谢谢各位看官。

1.页面全局背景色

page{

  height: 100%;

  background-color: #f8f8f8;

}

2.scroll-view滚动

横向(注意加粗的地方)：组件属性scroll-x="true";

scroll-view组件css:width:100%;overflow:hidden;white-space:nowrap;

scroll-view组件下的子元素css:display:inline-block;

纵向：需要设置高度才能滚动

3.tabBar的配置

底部tabBar效果图

app.json中配置的tabBar

注：配置所需图片大小为（81px*81px）不是这个尺寸会出现模糊    pagePath配置的路径是pages中存在的路径  iconPath是默认图标 sel...是选中的图标

知识点关联：在app.json中配置了tabBar的页面，但是在已经配置的tabBar页面中有需要跳转的功能的话，调用wx.switchTab方法跳转 其他方法不能实现跳转

4.小程序引入iconfont字体图标

下载字体图标到本地，复制iconfont.css到项目，把iconfont.css更改为iconfont.wxss，引入到所需页面（@import "/public/font/index/iconfont.wxss";我写的绝对路径）