微信小程序列表点击跳转对应详情页[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

2020/9/1:这种写法能实现但是用了多次缓存，后面发现其实是可以用自定义属性来传参的，具体有空我会写出来

效果展示：

微信小程序列表点击跳转对应详情页[通俗易懂]

微信小程序列表点击跳转对应详情页[通俗易懂]

列表页js部分：

onLoad: function(options) {

var that = this;

wx.request({

url: ‘你的接口’,

data: {

接口参数

},

header: {

‘content-type’: ‘application/json’, // 默认值

},

success: function (res) {

console.log(res.data);

that.setData({

你定义的变量名: res.data,

})

}

})

},

跳转详情页方法

viewDetail: function(e) {

let newsid = e.currentTarget.dataset.id || ”;

let newsTitle = e.currentTarget.dataset.newstitle || ”;

let newsAuthor = e.currentTarget.dataset.newsauthor || ”;

let newsDescription = e.currentTarget.dataset.newsdescription || ”;

let newsCreateTime = e.currentTarget.dataset.newscreatetime || ”;

let newsContentText = e.currentTarget.dataset.newscontenttext || ”;

let newsInfoSource = e.currentTarget.dataset.newsinfosource || ”;//你想传递的值

//放入缓存

wx.setStorage({

key: ‘你定义key的名程’,

data: {

newsid,

newsAuthor,

newsTitle,

newsDescription,

newsCreateTime,

newsContentText,

newsInfoSource

},

success: function () {

wx.navigateTo({

url: ‘../news_home/Detail/Detail?newsid=’ + newsid + “&newsTitle” + newsTitle + “&newsAuthor” + newsAuthor

+ “&newsDescription” + newsDescription + “&newsCreateTime” + newsCreateTime + “&newsContentText” + newsContentText

+ “&newsInfoSource” + newsInfoSource

})

}

})

},

列表页wxml：

用data-绑定传递

<view class=” bindtap=’viewDetail’ data-newsid='{ {item.newsid}}’ data-newstitle='{ {item.Title}}’ data-newsauthor='{ {item.Author}}’ data-newsdescription='{ {item.Description}}’ data-newscreatetime='{ {item.CreateTime}}’ data-newscontenttext='{ {item.ContentText}}’ data-newsinfosource='{ {item.InfoSource}}’>

<view style=”width:100%”>标题：{ {item.Title}}</view>

<view style=”width:100%”>作者：{ {item.Author}}</view>

<view style=”width:100%”>发布时间：{ {item.CreateTime}}</view>

</view>

详情页js：

从缓存中拿取数据

onShow: function () {

let that = this;

// 从缓存中获取

wx.getStorage({

key: ‘你定义key的名字’,

success: function (res) {

that.setData({

newsTitle: res.data.newsTitle,

newsAuthor:res.data.newsAuthor,

newsDescription:res.data.newsDescription,

newsCreateTime:res.data.newsCreateTime,

newsContentText:res.data.newsContentText,

newsInfoSource:res.data.newsInfoSource

})

},

})

},

详情页xwml：

<view>{ {newsInfoSource}}</view>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/171123.html原文链接：https://javaforall.cn