小程序:获取当前点击的view的title和其他配置数据并传递给下一个页面

来看这样一个需求,有一个列表页,点击item的时候要把对应的标题和内容传到下一个页面

列表页

详情页

有了需求,咱们就开始干

1.配置item的数组,从接口获取,在.js文件中的onReady函数中完成网络请求

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

        var page = this;
        wx.request({
            url: this.data.base_url + '/' + this.data.url,
            data: {
                size: '4',
            },
            header: {
                // !!!这个参数要注意,post的时候要带上,否则服务器收不到post请求的数据
                "Content-Type": "application/x-www-form-urlencoded"  
            },
            method: 'post',
            dataType: '',
            success: function (res) {

                page.setData({
                    array: res.data.data,
                });
            },
            fail: function (res) {
                // console.log(res);
            },
            complete: function (res) {
                // console.log(res.data);
            },
        })
    },

2.在.wxml中用wx:for创建布局并绑定一个点击事件,使用data-添加自定义数据.这里我们要使用title和desc两个数据,就按照如下方式写:

    
        
        {{item.title}}
    
  

3.在.js文件的点击事件中获取当前点击的view的绑定数据,并传递给下一个页面

页面跳转传递参数是采用url加参数的形式

navToDetailPage: function(option) {
        //option就是点击的view的data-title和data-desc
        console.log(option);
        wx.navigateTo({
            url: '../VideoDetail/VideoDetail?desc=' + option.currentTarget.dataset.desc+'&title='+option.currentTarget.dataset.title,
            success: function(res) {
                console.log(res);
            },
            fail: function(res) {},
            complete: function(res) {},
        })
    },
    hotvideotap: function(option) {
        wx.setNavigationBarTitle({
            title: option.currentTarget.dataset.id,
            success: function(res) {},
            fail: function(res) {},
            complete: function(res) {},
        })
    },

4.在详情页读取列表页传递来的两个参数

//---------------.js------------------
/**
   * 页面的初始数据
   */
  data: {
    title:'',
    desc:''
  },


/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
        title: options.title,
        desc: options.desc
    });
  },

//---------------.wxml------------------

  标题:{{title}}
  内容:{{desc}}

End