微型小程序之页面跳转传递参数

上一篇写了下拉刷新与上拉加载更多功能的实现（传送：https://blog.csdn.net/Change_xiao/article/details/101015479）
这篇继续拿调用新闻api的例子实现查看新闻详情的功能

核心是页面的跳转及值得获取与传递：

（1）获取需要传递的值
demo3.html

<view class="content" catchtap="goNewsTap" data-title="{{item.title}}" data-url = "{{item.url}}">

demo3.js

//点击跳转事件
  goNewsTap: function (event) {
    //获取值
    var url = event.currentTarget.dataset.url;
    var title = event.currentTarget.dataset.title;
    wx.navigateTo({
      url: '../demo5/demo5?url=' + url + '&title=' + title
    })
  },

（2）跳转的页面接收值
demo5.js

  onLoad:function(options){
    var that = this
    var url = options.url;
    var title = options.title;
    console.log(title)
    that.setData({
      url: url,
      title: title
    });
  },

基于我传递过来的值是一个地址，所以我直接用来渲染页面

<web-view  src="url" ></web-view>

完整代码：

demo3.js

// pages/demo3/demo3.js
var url = 'http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fdf5'
Page({

  /**
   * 页面的初始数据
   */
  data: {},
  //点击跳转事件
  goNewsTap: function (event) {
    //获取值
    var url = event.currentTarget.dataset.url;
    var title = event.currentTarget.dataset.title;
    wx.navigateTo({
      url: '../demo5/demo5?url=' + url + '&title=' + title
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        type: 'top',
        key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        that.setData({
          news: res.data.result.data,
        });
        console.log(res.data.result.data);
      },
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //显示刷新图标
    wx.showNavigationBarLoading();
    var that = this
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        type: 'top',
        key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        that.setData({
          news: res.data.result.data,
        });
        console.log(res.data);
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      },
    })

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })

    //隐藏加载图标
    setTimeout(function () {
      wx.request({
        url: url, //仅为示例，并非真实的接口地址
        data: {
          type: 'top',
          key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
        },
        header: {
          'content-type': 'application/json' // 默认值
        },

        success: function (res) {
          // 回调函数
          console.log(1111333);
          var newsMore = []
          //新的数据拼接旧的的数据
          newsMore = that.data.news.concat(res.data.result.data);
          // const oldData = that.data.news;
          that.setData({
            news: newsMore
          });
        }
      })
      //隐藏加载图标
      wx.hideLoading()
    }, 1000)

  },

})

demo5.js

// pages/demo5/demo5.js
Page({
  data:{},
  //接收上一页面传过来的值
  onLoad:function(options){
    var that = this
    var url = options.url;
    var title = options.title;
    console.log(title)
    that.setData({
      url: url,
      title: title
    });
  },
  //动态设置标题
  onReady: function () {
    wx.setNavigationBarTitle({
      title: this.data.title,
    })
  }

})

demo5.wxml

<!--pages/demo5/demo5.wxml-->
<web-view class="content" src="{{url}}" >{{title}}</web-view>

demo5.wxss

/* pages/demo5/demo5.wxss */
.content{
  width: 740rpx;
  height: 100%;
  border: 1px solid black
}
}

其它代码我上一篇一样上面有链接，