04 - 微信小程序实例开发 - 笑话大全

旧城等待， 2022-07-11 00:28 281阅读 0赞

本文章来自[【知识林】][Link 1]

### **实例主要功能** ###

*  使用`tabbar`做底部导航菜单
 *  使用`onReachBottom`触发底部事件
 *  自定义工具函数放到`util.js`中
 *  上拉至底部时获取新数据
 *  将新数据组合到原有数据中一起显示

### **先看效果图** ###

![微信小程序-笑话大全 纯文字笑话][-_]

![微信小程序-笑话大全 图文笑话][-_ 1]

### **关键代码分析** ###

*  tabBar的使用

在**`app.json`**中增加以下代码

"tabBar": {
        "color": "#888",
        "selectedColor": "#444",
        "list": [{
          "pagePath": "pages/index/index",
          "text": "笑话",
          "iconPath": "pages/imgs/joke.png",
          "selectedIconPath": "pages/imgs/joke2.png"
        }, {
          "pagePath": "pages/pictures/main",
          "text": "趣图",
          "iconPath": "pages/imgs/pic.png",
          "selectedIconPath": "pages/imgs/pic2.png"
        }]
      }

**说明：**`tabBar`是一个数据，**只能配置至少2个、最多5个tab**，tab按数组顺序排序，更多详情说明请参考[官方文档tabBar][tabBar]

*  笑话部份代码

**说明：**在这里使用了`require`来引用外部js，`util.replaceAll`就是引用的外部函数。`this.data.jokes.concat(tmp_data)`将原始数据与最新数据组合在一起，实现无刷新显示。

*  util工具类

function replaceAll(source, oldStr, newStr) {
        
        while (source.indexOf(oldStr) >= 0){
          source = source.replace(oldStr, newStr);
        }
        return source;
    }
    
    module.exports = {
      formatTime: formatTime,
      replaceAll: replaceAll
    }

*  视图页面（比较简单）

*  视图模板

<template name="joke-tpl">
        <view class="single-joke">
            <view><view class="num">{
       {index+1}}</view>{
       {item.updatetime}}</view>
            <text>{
       {item.content}}</text>
        </view>
    </template>

> 以上只是贴出了一些相对关键的代码，直接使用无法运行。
> 
> 机器人的接口参考了[聚合数据][Link 2]，也感谢聚合数据为我们提供了各种接口。
> 
> 本文章源代码：[https://github.com/zsl131/wx-app-study/tree/master/joke][https_github.com_zsl131_wx-app-study_tree_master_joke]

本文章来自[【知识林】][Link 1]

[Link 1]: http://www.zslin.com/web/article/detail/70
[-_]: /images/20220711/a33e870a77914c22aa29091cd470ce26.png
[-_ 1]: /images/20220711/a88d4b131c14494facb635b78e26e49a.png
[tabBar]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar
[Link 2]: https://www.juhe.cn
[https_github.com_zsl131_wx-app-study_tree_master_joke]: https://github.com/zsl131/wx-app-study/tree/master/joke