小程序--带参跳转

例:点击新闻列表中的某条新闻,跳转至对应的新闻详情页面

1.在新闻列表页面,选定一个参数(具有唯一性的参数),传至下一页面,即详情页面。绑定一个点击事件toNewsDetail,把要传的参数以“data-”的格式进行传递,此处传的参数为title;

代码如下:

 
      
          标题:{{item.Title}}
      
 

2.在新闻列表页面,用“e.currentTarget.dataset.xx”获取要传入详情页面的参数title,并在navigateTo中传入参数进行跳转;

代码如下:

 toNewsDetail:function(e){
    var Title = e.currentTarget.dataset.title;
    wx.navigateTo({
      url: '../NewsDetail/NewsDetail?Title=' + Title,
    })
  }

3.在详情页面接收数据,数据存在options中,以 “options.参数名”的形式进行获取,此处示例是利用富文本插件WxParse来解析通过接口读取的服务器中HTML格式的新闻内容并进行显示的;

代码如下:

 data: {
    dictNews: {},
    Title: "",
  }, 
onLoad: function(options) {
    var that = this;
    var Title = options.Title;
    
    var arrContent = wx.getStorageSync('content'); //获得上一页面的缓存数据
    for (var i = 0; i < arrContent.length; i++) {//遍历获取到的新闻列表
      var tempResult = arrContent[i];
      if (Title == tempResult.Title) {//当遍历到的新闻标题与当前所传的title参数相同时
        that.setData({
          dictNews: tempResult//将此条新闻内容赋给字典dictNews
        })
        WxParse.wxParse('content', 'html', that.data.dictNews.Content, that, 5);//解析该新闻内容
        break;
      }
    }
    /**
     * WxParse.wxParse(bindName , type, data, target,imagePadding)
     * 1.bindName绑定的数据名(必填)
     * 2.type可以为html或者md(必填)
     * 3.data为传入的具体数据(必填)
     * 4.target为Page对象,一般为this(必填)
     * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
     */

你可能感兴趣的:(小程序--带参跳转)