一、小程序返回顶部功能
实现返回顶部功能主要有两种实现方式：
- 页面级的滚动
- 首先监听页面滚动，代码如下：
//通过onPageScroll钩子监听页面滚动
onPageScroll(e) {
//通过其中的e可以获取scrollTop来获取滚动距离
console.log('滚动信息：', e);
//提取e中的scrollTop做后面的判断和逻辑处理
let { scrollTop } = e;
}
- 其次手动设置页面滚动位置，代码如下：
wxml部分:
<view class="backTop" catchtap="backTop" wx:if="{{ isShow }}">
<text>返回顶部</text>
</view>
js部分:
backTop() {
wx.pageScrollTo({
scrollTop: 0
})
}
2.scroll-view的滚动
- 通过给scroll添加bindscroll属性绑定监听滚动方法，scroll-top属性设置滚动的距离
wxml部分：
<scroll-view bindscroll="scrollFn" scroll-top='{{topNum}}'></scroll-view>
js部分：
scrollFn(e) {
console.log('scroll-view滚动监听：',e)
}
- 手动处理滚动距离，代码如下：（本质是通过数据驱动方案来修改scroll-top的值）
backTop() {
this.setData({
topNum:0
});
}
二、小程序节点选择（类似于JS原生的dom选择）
- 这里通过两种选择方案处理选择
1.选择一个节点(例如：view,text,button等)
首先创建一个选择器查询对象
var query = wx.createSelectorQuery();
其次：通过query来选择某个选择器，例如：选择class为.txt的节点
query.select('.txt')
最后通过boundingClientRect()或scrollOffset获取相关信息就可以获取相关样式信息啦，如下代码：
query.select('.txt')
.boundingClientRect()
.exec(res=>{
//通过exec中的回调参数res来取到信息
let {width,height,left,top} = res[0];
...其他逻辑处理,例如：this.setData()来更新一个样式
})
官方文档参考：developers.weixin.qq.com/miniprogram…
2.选择一个组件，通过this.selectComponent('组件选择器名')
例如：this.selectComponent("#dialog")
<Dialog id="dialog" />
官方文档参考：developers.weixin.qq.com/miniprogram…
三、微信小程序对iconfont图标的引用
分两种情况引入：
1.普通页面引入icon
-
去iconfont官网挑选自己喜欢的图标加入购物车，最后添加到项目
-
这里有三种图标格式：unicode(编码),font class(字体图标),symbol(svg)，其中选择字体图标分类
-
复制生成的css，例如：//at.alicdn.com/t/font_1663941_7tr0q7yfqfx.css，并将样式复制到小程序的公共样式文件中，例如：/public/style/icon.css
-
打开app.wxss,并在其中引入@import '/public/style/icon.css'
-
在需要用到icon的wxml中通过i标签方式使用就好啦，如下代码：
<i class="iconfont icon-Home">
2.自定义组件中引入icon
说明：因为自定义组件默认有样式隔离问题，所以需要特殊处理才能引入iconfont图标,其实也很简单，往下看：
- 通过在自定义组件的JS文件中添加options来配置，如下代码：
Component({
options:{
addGlobalClass: true, //方法1
或
styleIsolation: "apply-shared", //方法2
}
});
方法3：通过在自定义组件类名前添加~符号来实现引入父级或公共组件样式，如下代码：
<i class="~iconfont ~icon-gouwuche" />
