Not long after I just learned the WeChat applet, I encountered many problems, and this is also a problem I encountered.
Idea: ①Jump—the component is bound to a click event, and the jump is realized in the event
②Display the content of the clicked element - get the id of the clicked element in the list, but I found that the id I got is empty, nothing, blah blah. Poor Xiaobai doesn't even know what happened. like the picture below
1. The solution to get the id
wxml is like this:
<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">投简人数: {
{xx}} </text>
<text decode="true">已招人数: {
{YY}} </text>
<text decode="true">浏览次数: {
{ZZ}} </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 (that is, the method when clicking on a specific element in the list):
bind_publish(e){
console.log(e);
},When we click on a specific element of the list, the printed e is like this
Why is the analysis id not obtained? Answer: I don't know yet, woo woo woo. The bitterness of a rookie.
Solution: We create an id for each element of the list, which can be named as id, idx, idy, etc. How is that possible? This is very simple. Just add a little something to our original wxml
Current 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">投简人数: {
{xx}} </text>
<text decode="true">已招人数: {
{YY}} </text>
<text decode="true">浏览次数: {
{ZZ}} </text>
</view>
</view>
</view>
</view>The difference from the previous one is that there is an extra line of data-id="{ {index}}", which means to add a field id to each element of the list, and its id is equal to the id of the element in the list. In this way, we click on an element in the list again to get its id. (wxss and js have not changed)
After clicking on an element in the list
3142312
Second, the solution to the jump problem
In this way, we got the id of the element we clicked on it, and then the next step is to jump to the detailed page of the element we clicked.
Implementation method: ①The page is still an ordinary page, but the data is different.
Solution process: ① page jump - wx.navigateTo method ② page display content - get the _id of the element according to the id we obtained when jumping, and pass the _id to the one we want to jump to Page ③ Carry out conditional query in the database according to the _id data carried by the jump
js (page js before the jump)
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 (page js after the jump)
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);//满足条件的数据
}In this way, we have achieved that, click on an element, you can jump to the detailed page for the element