API接口地址;
http://m2.qiushibaike.com/article/list/{type}?type=refresh&page={page}&count={count}
参数type为类型，latest最新、text文本、image图片、video视频
参数page为页码；参数count为每页数量
示例：http://m2.qiushibaike.com/article/list/text?type=refresh&page=1&count=12

一，初始化

删除index和log页面，然后新建home页面，因为是一个页面内滑动，所以有好多个wxml文件

二，滑动切换页面的实现

相应的wxml代码：

<view class="bg"><view class="nav"><!-- 水平滚动 --><scroll-view scroll-x="true" class="scroll-view"><view class="scroll-view"><view><view class="{{currentIndex==0?'select':'normal'}}" bindtap="switchNav" id="0">Vip专享</view></view><view><view class="{{currentIndex==1?'select':'normal'}}" bindtap="switchNav" id="1">视频</view></view><view><view class="{{currentIndex==2?'select':'normal'}}" bindtap="switchNav" id="2">图片</view></view><view><view class="{{currentIndex==3?'select':'normal'}}"  bindtap="switchNav" id="3">糗事</view></view><view><view class="{{currentIndex==4?'select':'normal'}}" bindtap="switchNav" id="4">精华</view></view><view><view class="{{currentIndex==5?'select':'normal'}}" bindtap="switchNav" id="5">穿越</view></view><view><view class="{{currentIndex==6?'select':'normal'}}" bindtap="switchNav" id="6">爆料</view></view></view></scroll-view></view><!-- 审核 --><view class="opr">审</view><!-- 添加 --><view class="add">+</view>
</view><!-- 内容区域 -->
<swiper current="{{currentIndex}}" style="height:{{winHeight}}px"><swiper-item><!-- 引入其他页面加载进来 --><include src="vip.wxml"></include></swiper-item><swiper-item><include src="video.wxml"></include></swiper-item><swiper-item><include src="data:image.wxml"></include></swiper-item><swiper-item>我是糗事百科</swiper-item><swiper-item>我是精华内容</swiper-item><swiper-item>我是穿越内容</swiper-item><swiper-item>我是爆料内容</swiper-item>
</swiper>

css代码：

/* pages/home/home.wxss */
.bg{height:50px;width: 100%;display: flex;flex-direction: row;align-items: center;background-color: #ffba1e;color: #fff;
}
.nav{width: 70%;height: 100%;overflow: hidden;
}
.scroll-view{display: flex;margin-left: 10px;height: 100%;
}
.select{width: 70px;height: 100%;line-height: 50px;text-align: center;/* padding: 0 10px; */font-weight: bold;font-size: 14px;border-bottom: 8px solid #fff;box-sizing: border-box;
}
.normal{width: 70px;height: 100%;line-height: 50px;text-align: center;/* padding: 0 10px; */font-size: 14px;box-sizing: border-box;
}
.opr{width: 20px;height: 20px;border-radius: 50%;background-color: white;color: #ffba1e;font-size: 13px;font-weight: bold;text-align: center;line-height: 20px;margin: 0 10px;
}
.add{width: 20%;height: 50px;color: white;font-size: 50px;font-weight: bold;text-align: right;line-height: 50px;}

js代码：

data: {currentIndex:0,winHeight:0},// tab按钮切换页面switchNav(e){if(this.data.currentIndex==e.target.id){return}else{this.setData({currentIndex:e.target.id})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//保存this(箭头函数会影响this)var page=this//获取系统信息（用什么设备打开的这个页面）wx.getSystemInfo({success (res) {//获取可使用的窗口的宽高page.setData({winHeight:res.windowHeight})}})},

三，首页内容的实现

还是普通的页面渲染，唯一需要注意的是这里依旧使用wx.request来获取数据

四，上拉加载更多的实现

第一步：先在该页面的.json文件中增加配置;

第二步：设置加载的代码

超过这个页码就不加载了。

微信小程序学习笔记-（11）-仿糗事百科相关推荐

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
Python爬虫学习笔记 -- 爬取糗事百科
Python爬虫学习笔记 -- 爬取糗事百科代码存放地址: https://github.com/xyls2011/python/tree/master/qiushibaike 爬取网址:https ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序学习笔记01：微信小程序概述
文章目录零.学习目标一.小程序的历史二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序三.小程序与HTML5和APP比较 ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...

微信小程序学习笔记-（11）-仿糗事百科