列表页转内容页-实现上一页下一页效果

一、前言

自己制作的一款小程序里面，为了实现上一页下一页的效果，以及点击view组件后跳转并提取指定的文章页面内容。并且用户在内容页点击上一页下一页时进行相应的变化。

开发困惑：一个冒号和等号的区别让我折磨了两三天。如下

   this.setData({
      books:books
    })

里面应该是“：”而不是“=”。一开始我填的等号，然后一直排错，后来一不小心看到修改了下，果然如此！

二、列表页wxml

<block wx:for="{{bookkey}}" wx:for-item="item"  wx:for-index="idx">
  <view class='item-box' bindtap='TZlist' data-id="{{idx+1}}">
    <text class='numID'>{{idx+1}}.</text>
    <text class='item-title'>{{item.title}}</text>
  </view>
</block>

利用wx:for将bookey内的数据按顺序输出，同时定义属性data-id传出相应的数据id。绑定点击事件TZlist

三、列表页js

  TZlist:function(event){
    var bookid = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../book/book?id=' + bookid   //点击后请求id传出到新页面
    })
  },
  data: {
    
  },
  onLoad: function (options) {
    this.setData({
      bookkey: book.booklist     //获取相应的数据并写入data
    });
  }

在此之前得引入数据库文件，定义变量book来接收

var book = require("../../data/book_data.js");

四、内容页wxml

<view class='continer'>
    <view class='quse-title'>
      <text class='quse-title2'>
      问题{{books.id}}：{{books.title}}
    </text>
      <view class='answer'>
        {{books.contant}}
      </view> 
    </view>
</view>
<view class='anniu-box'>
  <view class='anniu-shang'  bindtap='Shangtiao' data-bookss="{{books.id-1}}">
    上一条
  </view>
  <view class='anniu-xia' bindtap='Xiatiao' data-bookss="{{books.id}}">
    下一条
  </view>
</view>

五、内容页js

 onLoad: function (options) {
    var bookid = options.id;    //接收之前传出的id值并赋给bookid变量
    var books = book.booklist[bookid-1];   //获取数据文件中的相关id数据
    this.setData({
      books:books      //将获取到的数据写入data
    })
  }

 Shangtiao: function (event) {
    var bookid = event.currentTarget.dataset.bookss;
    if(bookid){
      wx.navigateTo({
        url: '../book/book?id=' + bookid
      })
    }
  },
  Xiatiao: function (event) {
    var bookid = event.currentTarget.dataset.bookss;
    parseInt("bookid");
    bookid ++;
    console.log(bookid);
    wx.navigateTo({
      url: '../book/book?id=' + bookid
    })
  },

上一块是实现上一页下一页效果的代码，复用性不高，到时候再进行修改