微信小程序列表页跳转到详情页

最新推荐文章于 2024-07-25 16:38:27 发布

红豆O(∩_∩)O

最新推荐文章于 2024-07-25 16:38:27 发布

阅读量3.3k

点赞数

分类专栏：经验

本文链接：https://blog.csdn.net/i96249264_bo/article/details/117466997

版权

经验专栏收录该内容

18 篇文章 1 订阅

订阅专栏

描述:从列表页,点击不同列,跳转到相对应的详情页,在跳转的过程中需要传递id给详情页.
思路:列表页中,在.wxml页面里,在列标签上自定义一个id属性和一个点击事件;点击的时候触发点击事件 ,在.js文件中从这个点击事件的形参event中可以获取到自定义的id,使用wx.navigateTo({})实现路由跳转,在要跳转的路由后面用?号拼接id,将id传给详情页.在详情页调用详情页的接口就可以实现了
实现过程:
列表页:
.wxml页面:定义一个点击事件和自定义一个id属性,这里的id属性名是data-postId-idex ,属性值是primaryKey,primaryKey是从后端获取回来的每一列的唯一标识.

      <view class="Announcement_content">
      <view   class="Announcement_content_list list_border"  wx:for="{{announcementList}}"      bindtap="getDetail"  data-postId-idex = "{{item.primaryKey}}" wx:for-item="item" wx:key="index">
        <text class="Announcement_content_list_titel">{{item.adAnnoName}}</text>
        <view class="fire_time">
          <image   wx:if="{{item.adAnnoTop == 1}}"  src="../../compones/assates/imgs/huo.png"></image>
          <text class="Announcement_content_list_time">{{item.adAnnoTime}}</text>
        </view>
      </view>
    </view>

后端获取的数据是:

0:
adAnnoAcce: ""
adAnnoEmp: "762019070427031121119"
adAnnoName: "小区绿化杀虫"
adAnnoStatus: 1
adAnnoText: "小区绿化杀虫"
adAnnoTime: "2021-06-01"
adAnnoTop: "1"
adAnnoType: 0
companyId: 76
companyName: "海山金谷天城"
employee: null
images: []
isHaveImage: "1"
lastmodiDate: "2021-06-01 11:05:08"
lastmodiId: "762019070427031121119"
orderNumber: "6674B1AN202106010002"
orderPriority: ""
primaryKey: 651
publisher: ""
recordDate: "2021-06-01"
recordId: "762019070427031121119"
serviceName: "曾惠虹"
views: 6

.js文件中:
这里的url是要跳转到的详情页的路径,路径必须是绝对路径;这里拼接了唯一表示event.currentTarget.dataset.postidIdex.

 getDetail:function(event){
    console.log("event")
    console.log(event)
    wx.navigateTo({
      url: '../../pages/AnnouncementDetails/inAnnouncementDetailsdex?postidIdex='+ event.currentTarget.dataset.postidIdex,
    })
    
  },

详情页:在data中定义primaryKey存放从列表页传过来的唯一表示,onLoad: function (options){}中的options接收了列表页传过来的唯一表示,将这个唯一表示存到data中的primaryKey中,然后调后端给的接口,将唯一表示传给后端,然后做页面渲染即可.

  data: {
    primaryKey:'',
    Detail:[]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('11111')
    console.log(options)
    this.setData({
      primaryKey:options.postidIdex
    })
    var _that =this
    wx.request({
      url: '后端给的接口', 
      method:'POST',
      data: {
        "primaryKey":this.data.primaryKey,
      },
      header: {
          'content-type': 'application/x-www-form-urlencoded'
      },
      dataType:'json',
      success: function(res) {
        console.log("resssssss")
        console.log(res)
        _that.setData({
          Detail:res.data.list
        })
      }
    })

  },

参考文章:https://blog.csdn.net/weixin_41804429/article/details/81174230