小程序列表跳转至详情_小程序相互跳转的方法

小程序列表跳转至详情_小程序相互跳转的方法效果展示:列表页js部分:onLoad:function(options){varthat=this;wx.request({url:’你的接口’,data:{ 接口参数},header:{‘content-type’:’ap…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.net/171054.html原文链接:https://javaforall.net

(0)
上一篇 2022年8月18日 上午11:00
下一篇 2022年8月18日 上午11:16


相关推荐

  • disruptor (史上最全)[通俗易懂]

    disruptor (史上最全)[通俗易懂]文章很长,而且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录语雀版|总目录码云版|总目录博客园版为您奉上珍贵的学习资源:免费赠送:《尼恩Java面试宝典》持续更新+史上最全+

    2022年7月1日
    31
  • 在 Linux (Debian 13.3.0) 从源码安装 OpenClaw + Feishu Bot

    在 Linux (Debian 13.3.0) 从源码安装 OpenClaw + Feishu Bot

    2026年3月13日
    4
  • springboot集成elasticsearch注意事项

    springboot集成elasticsearch注意事项一、elasticsearch基础  这里假设各位已经简单了解过elasticsearch,并不对es进入更多的,更深层次的解释,如有必要,会在写文章专门进行es讲解。  Elasticsearch是一个基于ApacheLucene(TM)的开源搜索引擎。无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进、性能最好的、功能最全的搜索引擎库。  但是,Lucene只是一个…

    2022年6月24日
    22
  • java 中几种常用数据结构「建议收藏」

    java 中几种常用数据结构「建议收藏」Java中有几种常用的数据结构,主要分为Collection和map两个主要接口(接口只提供方法,并不提供实现),而程序中最终使用的数据结构是继承自这些接口的数据结构类。一、几个常用类的区别 1.ArrayList:元素单个,效率高,多用于查询 2.Vector:元素单个,线程安全,多用于查询 3.LinkedList:元素单个,多用于插入和删除 4.H

    2022年7月8日
    23
  • flash制作车轮转动的汽车沿着路径走的动画

    flash制作车轮转动的汽车沿着路径走的动画二维动画制作实验报告一.实验目的1.掌握动画的概念。2.熟练Flash的界面。3.掌握Flash界面中各组成元素和功能。二.实验工具    Flash三.实验要求制作车轮转动的汽车沿着路径走。四.实验内容1.搜索相关的素材,一个小汽车,将汽车的车轮和车身单独裁剪出来。2.首先,新建一个600×400的画布。将车轮和车身导入到库里。将车轮和车身拖入舞台,双击车轮进入编辑界面,在30帧新建关键帧,在中…

    2022年5月29日
    81
  • Js:indexOf() 和 lastIndexOf() 的区别[通俗易懂]

    Js:indexOf() 和 lastIndexOf() 的区别[通俗易懂]ECMAScript5为数组实例添加了两个位置方法:indexOf()和lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。indexOf()方法从数组的开头(位置0)开始向后查找lastIndexOf()方法则从数组的末尾开始向前查找。这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。…

    2022年7月14日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号