小程序实现根据id进行页面跳转（简陋的、不用后端的方法）

第一个

1、给每个用户头像添加点击事件

wxml

<image src="{{item.r_img}}" mode="widthFix" bindtap="enterDetail" data-id="{{item.r_id}}" data-index="{{item.index}}"></image>

js的data

roleList:[{
        r_id:1,
        r_name:"小白鼠",
        r_img:"/images/num/3.jpg",
        r_content:"路边的小狗超可爱~~~",
        biao_o:"大一",
        biao_t:"Lv10",
        more:"/images/common/more-horizontal-outline.png",
        time:"2023-06-18 08:30",
        zan:"/images/common/heart-outline.png",
        ping:"/images/common/message-square-outline.png",
        num1:"0",
        num2:"2",
        testImage:[
          "/images/num/0.jpg",
          "/images/num/1.jpg",
          "/images/num/2.jpg"
        ]
      },{r_id:2,
        r_name:"不做出小程序不改名",
        r_img:"/images/icon/smiling-face.png",
        r_content:"今天看见数计学院的路边有蛇，大家小心！！！！",
        biao_o:"大二",
        biao_t:"Lv10",
        more:"/images/common/more-horizontal-outline.png",
        time:"2024-05-18 08:30",
        zan:"/images/common/heart-outline.png",
        ping:"/images/common/message-square-outline.png",
        num1:"0",
        num2:"2",
        testImage:[
          "/images/num/4.jpg",
          "/images/num/5.jpg",
          "/images/num/6.jpg"
        ]},
        {r_id:3,
          r_name:"帅气的我你不配",
          r_img:"/images/common/at-outline.png",
          r_content:"表白今天操场上的女孩子，求联系方式哇！",
          biao_o:"大四",
          biao_t:"Lv100",
          more:"/images/common/more-horizontal-outline.png",
          time:"2024-05-18 08:30",
          zan:"/images/common/heart-outline.png",
          ping:"/images/common/message-square-outline.png",
          num1:"0",
          num2:"2",
          testImage:[
            "/images/num/8.jpg",
            "/images/num/9.jpg",
            "/images/num/0.jpg"
          ]}
      ]
  

 js的方法

//根据id跳转对应详情页面
   enterDetail:function(e){
    console.log(e)
    let index=e.currentTarget.dataset.id
    console.log(index)
    if(index==1){
      wx.navigateTo({
      url: '/pages/pinglun/pinglun?id='+this.data.roleList[index].id,
    })
    }else if(index==2){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.roleList[index].id,
      })
    }
}

实现效果

点第一个头像，进入该界面

 

 

点第二个头像，进入另外一个界面

 

 第二个

wxml

<!-- 搜索结果显示框 -->
<scroll-view wx:if="{{focus}}" class="scrollview" scroll-y="true" wx:key="index">
  <view wx:for="{{list}}" wx:key="name">
    <view class="scrollItem" bindtap="enterDetail" data-id="{{item.id}}" data-index="{{item.index}}">
    <text  class="font1" space="nbsp">   {{item.name}}</text>
    <text class="font2"space="nbsp">{{item.num}}   </text>
    </view>
  </view>
</scroll-view>

js

  data:{
list: [{'name':'兼职外快','num':'10个',id:"1"},{'name':'失物招领','num':'15个',id:"2"},{'name':'我爱兼职','num':'5个',id:"3"},{'name':'结伴学习','num':'20个',id:"4"},{'name':'丢失证件','num':'20个',id:"5"},{'name':'赚钱兼职','num':'10个',id:"6"},{'name':'捞人交友','num':'15个',id:"7"}],	//这是搜索到的结果
    list2: [{'name':'兼职外快','num':'10个',id:"1"},{'name':'失物招领','num':'15个',id:"2"},{'name':'我爱兼职','num':'5个',id:"3"},{'name':'结伴学习','num':'20个',id:"4"},{'name':'丢失证件','num':'20个',id:"5"},{'name':'赚钱兼职','num':'10个',id:"6"},{'name':'捞人交友','num':'15个',id:"7"}],	//这是所有可供查询的记录
},


focusHandler(e){
    this.setData({focus:true});
  },
  cancelHandler(e)
  {
    this.setData({focus:false});
  },
  query(e){
   
    this.setData({
      inputValue: e.detail.value
  })  //首先回显输入的字符串
    //实现搜索的功能
    var list = this.data.list2;		//先把第二条json存起来
    var list2 = [];		//定义一个数组
    //循环去取数据
    for(var i=0;i<list.length;i++){
      var string = list[i].name;
      //查询json里的name是否包含搜索的关键词，如果有就把他装进list2数组
      if(string.indexOf(e.detail.value) >= 0){
        list2.push(list[i]);
      }
    }
    //到这里list2就已经是你查出的数据
    //如果输入的关键词为空就加载原来的全部数据，不是空就加载搜索到的数据
    if(e.detail.value == ""){
      //加载全部
      this.setData({
        list: list
      })
    } else {
      this.setData({
        list: list2
      })
    }
  },
  //根据id跳转对应详情页面
  enterDetail:function(e){
    
    console.log(222)
    let index=e.currentTarget.dataset.id
    console.log(index)
    if(index==1){
      wx.navigateTo({
      url: '/pages/detail1/detail1?id='+this.data.list2[index].id,
    })
    }else if(index==2){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.list2[index].id,
      })
    }else if(index==3){
      wx.navigateTo({
        url: '/pages/huifu/huifu?id='+this.data.list2[index].id,
      })
    }else if(index==4){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.list2[index].id,
      })
    }else if(index==5){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.list2[index].id,
      })
    }else if(index==6){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.list2[index].id,
      })
    }else if(index==7){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.data.list2[index].id,
      })
    }
    
  },

wxss

.scrollview{
  width: 690rpx;
  height: 150rpx;
  margin-left:5rpx;
  margin-top: 50rpx;
  /* background: rgba(163, 84, 84, 0.5); */
  border: 3rpx solid gainsboro;
}
.scrollItem{
  width: 690rpx;
  height: 50rpx;
  margin-left: -5rpx;
  border: cadetblue 2rpx solid;
}
.font2{
  font-size: 22rpx;
  /* margin-right: 10rpx; */
  margin-left: 450rpx;
}

效果

 点击不同行，跳转不同详情页面