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

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="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文件中增加配置;

第二步：设置加载的代码

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