点击消息后,进入消息页面,实现滚动到最底端的动画效果。
1、在页面的最下面增加一个带有id="bottom" 的组件
<view class="messages">
<view class="item" wx:for="{{messages}}" wx:key="id">
<navigator>
<text class="title">{{item.title}}</text>
</navigator>
<text class="date">{{item.date}}</text>
<navigator>
<image src="{{item.image}}" />
</navigator>
<text class="summary">{{item.summary}}</text>
<navigator class="expand">Read All</navigator>
</view>
</view>
<view id="bottom"></view>
2、在页面渲染的时候进行设置:
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
const query = wx.createSelectorQuery()
query.select('#bottom').boundingClientRect()
query.exec(res => {
wx.pageScrollTo({
scrollTop: res[0].top + 200
})
})
},