微信小程序-mpvue-下拉加载，上滑刷新无法触发onReachBottom，onPullDownRefresh

### 博客小程序开发与实现方式 #### 微信小程序框架的选择 在开发博客小程序时，可以选择多种微信小程序框架来满足不同的需求。原生框架是最基础的选择，它基于微信官方提供的组件和API进行开发，使用WXML模板语言、WXSS样式语言以及JavaScript编程语言编写代码[^3]。这种框架适合需要高性能和全面功能支持的应用场景。 如果希望降低开发复杂度并提高效率，则可以考虑第三方框架如 **Wepy** 或 **mpvue**。这些框架允许开发者利用 Vue.js 的语法风格来进行小程序开发，从而减少学习成本并提升生产力[^3]。对于更复杂的项目或者需要多端兼容的情况，还可以选用像 Taro 这样的跨平台框架，它可以同时支持小程序、H5 和 React Native 多种环境下的应用构建[^3]。 #### 数据处理与交互设计 针对博客类应用程序而言，其核心在于如何有效地管理和展示文章内容及相关信息。这通常涉及以下几个方面： 1. **数据存储方案** - 使用本地缓存机制保存临时性的用户偏好设置或者是最近浏览的文章列表等简单数据项。 ```javascript wx.setStorageSync('key', value); const data = wx.getStorageSync('key'); ``` - 对于持久化且规模较大的资料（比如完整的博文集合），则推荐通过云端数据库服务完成远程同步操作[^4]。 2. **UI 组件定制** - 构建清晰直观的信息流视图以便让用户轻松找到感兴趣的主题章节； - 添加评论区模块促进读者之间的交流互动； - 设计搜索栏方便快速定位特定关键词关联的内容片段。 3. **动态加载技术优化用户体验** 当面对大量条目组成的长页面时，应实施按需分页获取策略而非一次性全部渲染出来以免影响整体流畅感。例如借助 `onReachBottom` 方法监听触底事件触发新的批次请求过程[^2]。 ```javascript Page({ data: { articles: [], page: 1, pageSize: 10, }, onPullDownRefresh() { this.setData({page: 1, articles: []}); this.fetchArticles(); wx.stopPullDownRefresh(); }, fetchArticles(){ let that = this; wx.request({ url:`https://example.com/api/articles?page=${that.data.page}&size=${that.data.pageSize}`, success(res){ if (res.statusCode === 200 && res.data.length > 0 ){ that.setData({ articles:[...this.data.articles,...res.data], page:this.data.page+1 }); } } }) } }) ``` 以上展示了基本的下拉刷新及上滑加载更多逻辑样例。 ---