微信小程序——点击列表里某元素，实现跳转+显示点击元素的内容

最近刚刚学微信小程序没多久，碰到了很多问题，这也是我碰到的一个问题。

思路：①跳转——组件绑定一个点击事件，在事件里面实现跳转

           ②显示点击元素的内容——获取点击元素在列表里面的id，但是我发现我获取到的id是空的，啥也没有，呜呜呜。可怜的小白，都不知道发生了什么。就像下图

 一、id的获取解决方法

wxml是这样的：

<view
 wx:for-items="{{em_jobs}}"
 wx:key="{{index}}"
 wx:if="{{b1}}"
 class="total_item"
 bind:tap="bind_publish"
>
	<view class="item_class" wx:if="{{b1}}">
		<text wx:if="{{b1}}">{{item.input_position}}</text>
		<view class="text_class">发布时间:\n\t\n\t {{item.strdate}}</view>
		<view class="big_class">
			<view class="big_class">
				<text decode="true">投简人数:&nbsp;{{xx}}&nbsp;&nbsp;&nbsp;</text>
				<text decode="true">已招人数:&nbsp;{{YY}}&nbsp;&nbsp;&nbsp;</text>
				<text decode="true">浏览次数:&nbsp;{{ZZ}}&nbsp;&nbsp;&nbsp;</text>
			</view>
		</view>
	</view>
</view>

 wxss：

.total_item{
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
 .item_class{
   width: 90%;
   height: 200rpx;
   background-color: #F5F5F5;
   margin-top: 10rpx;
   margin-bottom: 10rpx;
   border-radius: 5px;
   padding-left: 20rpx;
   padding-top: 20rpx;
   padding-right: 20rpx;
 }
 .text_class{
   top:150rpx;
   font-size:xx-small;
 }
 
 .big_class{
   margin-top: 30rpx;
   margin-bottom: 20rpx;
   font-size: x-small;
   display: flex;
   flex-direction: row;
   justify-content: right;
 }

js（也就是点击列表里面某个具体的元素时的方法）：

 bind_publish(e){
   console.log(e);
  },

当我们点击列表的某个具体元素时，打印的e却是这样的

 分析id为什么没有获取到？答：我目前也不知道，呜呜呜。菜鸟的辛酸。

解决方法：我们给列表的每一个元素在创建一个id，可以命名为id，idx，idy等等名字。那是如何实现的呢？这个非常简单。就是在我们原来的wxml里面加了一点点东西

现在的wxml：

<view
 wx:for-items="{{em_jobs}}"
 wx:key="{{index}}"
 wx:if="{{b1}}"
 data-id="{{index}}"<!--这个就是我们手动给每一个元素添加的id-->
 class="total_item"
 bind:tap="bind_publish"
>
	<view class="item_class" wx:if="{{b1}}">
		<text wx:if="{{b1}}">{{item.input_position}}</text>
		<view class="text_class">发布时间:\n\t\n\t {{item.strdate}}</view>
		<view class="big_class">
			<view class="big_class">
				<text decode="true">投简人数:&nbsp;{{xx}}&nbsp;&nbsp;&nbsp;</text>
				<text decode="true">已招人数:&nbsp;{{YY}}&nbsp;&nbsp;&nbsp;</text>
				<text decode="true">浏览次数:&nbsp;{{ZZ}}&nbsp;&nbsp;&nbsp;</text>
			</view>
		</view>
	</view>
</view>

与前面不同的就是这个里面多了一行data-id="{{index}}"，而它的意思是给列表的每一个元素增加一个字段id，同时它的id等于该元素在列表的id。就这样我们再次点击列表里面的某个元素，就可以获取到它的id了。（wxss、js都未发生改变）

点击列表里面某个元素后

 3142312

二、跳转问题的解决

就这样我们就在上面就获取到了我们点击那个元素的id了，那么接下来就是跳转到我们所点击元素的详细页面了。

实现方法：①页面还是一个普通的页面只是数据的不同罢了。

解决过程：①页面的跳转——wx.navigateTo方法    ②页面的显示内容——在跳转的时候根据我们获得的id获取到该元素的_id，将_id传递到我们要跳转到的页面 ③根据跳转携带的_id数据在数据库中进行条件查询

js（跳转前的页面js）

bind_publish(e){
    //点击某个具体的元素，获取到他在数组中的下标，根据下标，将该元素_id值传递给下一个页面
    console.log(e.currentTarget.dataset.id);
    var that = this
    that.setData({
      ids:that.data.em_jobs[e.currentTarget.dataset.id]._id //我们所点击元素的_id
    })

    wx.navigateTo({
      url: '../../employer/recruiting/recruiting?ids='+that.data.ids,//将点击元素的_id传递到我们要跳转的页面
    })
   console.log(e);
  },

js（跳转后的页面js）

onLoad: function (options) {
    var that = this
    //获取该记录的id
    that.setData({
      id: options.ids,//跳转携带的数据
    })
    //根据跳转传递过来的页面数据，在数据库里面实现查找，将找到的数据在页面进行显示
    db.collection('publish_job').where({
      _id: options.ids,
    })
    .get({
      success :(res)=>{
        console.log(res.data);//满足条件的数据

     }

就这样我们实现了，点击某个元素，就可以跳转到给元素的详细页面了