uni-app中在同一个页面使用多个picker组件出现的一些问题以及解决方法

作为一个刚刚了解一点微信小程序就被迫改用uni-app的人来说,这个框架给我的感觉就是哪里都是坑。倒不是说框架本身问题很多,而是自己没有太多的参考对象。当初学微信的时候,遇到一点问题上百度搜真的是一搜一大把,而现在就是屈指可数。而且也没有什么教学视频,至少我当初入坑时,能搜到的视频还是要收费的。总之这一路走得不平坦,但也感觉收获了不少。现在依然有很多问题,但是学会了用微信小程序来转化成uni-app,很多时候思路都是一样的,至少具体写法有些不同。这也会让我很抓狂,毕竟,我真的是个新手,很多基础知识都不熟,文档也是看得头痛还不能理解。
这不,刚刚就把一个困扰了许久的问题解决了,思路正是来自微信小程序的。这是思路来源,感谢!https://segmentfault.com/a/1190000009797083

<block v-for="(student,index) in studentlist2" :key="index">  
    <view class="student-list-item padding-sm">  
        <image class="avatar" :src="student.avatar">  

        </image>  
        <view class="student-info padding-sm">  
            <view class="name font-md">{{student.name}}<span class="iconfont icon-yezi">&#xe601;</span></view>  
            <view class="student-id font-sm grey main-font-color">{{student.id}}</view>  

        </view>  
        <picker @change="bindPickerChange" :value="student.newindex" :range="array" :data-current="index">  
            <view class="uni-input">{{array[student.newindex]}}</view>  
        </picker>  
    </view>  
    <view class="border"></view>  
</block> 

这是视图层,用到是for循环实现一个学生列表。对没有及时签到的学生可以进行选择,故需要用到picker。可是问题就来了,有多个picker,里面的{{array[index]}}显示的内容都是由data中的同一个index控制的,这样,每一次改变其中一个picker的值时,所有的picker都会改变值。这个问题困扰了我许久。当时我就想如果可以得到当前改变的picker的index就好了,这样就可以指定改变的picker了。但是当时的我不知道如何获取。
我的疑点有以下几点:
1.如何获取当前的index?本来也是可以的,用一个函数,参数为student,然后在函数里写index=e.index不就好了?可是这里绑定的函数是@change=”bindPickerChange”,和普通的绑定不一样,我不知道如何传参。

  1. 然后就是我不知到为何在method中的bindPickerChange又是有一个参数e的。我知道是自己基础不好,对e的认识很浅。我试图用console.log来获取e,看看其内部究竟有哪些值,但结果并不好。
  2. 能不能用data-XXX呢?其实如果是在微信小程序里面,我肯定首选这个,但是在uni-app里,我一直以为不能用data-XXX,因为官方文档似乎没有,网上也没有找到(我的搜索水平太差了),或者说这是默认就可以的。总之,我直到看了搭档这样用以后才知道原来uni-app是可以用的。当时我还很惊讶地问他是怎么知道的,他说还是当初学小程序的时候我教他的。卧槽,这么interesting的吗?

今天终于在一篇解决微信小程序的文章里找到了思路,也解决了之前的疑点。
其实以上三点都是一样的。因为data-xxx是可以用的,而在e里面就是可以看到data-xxx的,这就是答案。

studentlist2: [  
    {  
        newindex:0,  
        avatar: '/static/lishi.jpg',  
        name: '楚秋然',  
        id: '2017082314'  
    },  
    {  
        newindex:1,  
        avatar: '/static/xinli.jpg',  
        name: '愧泽',  
        id: '2017082315'  
    }  
]  

bindPickerChange: function(e) {  
     const curindex = e.target.dataset.current  
    console.log('picker发送选择改变,携带值为', e.target.value)  
    console.log('picker发送选择改变,携带值为', curindex)  
    this.studentlist2[curindex].newindex = e.target.value  
    console.log("index="+this.studentlist.index)  
}

感觉自己是基础太差了。又没有人带,不然,这么easy的问题真的不该被卡住这么久。一个小白之所以会不自量力地写一篇文章也是想积累一些经验,和大家交流一下。而且,这个问题似乎都没有人写过,想着可能是太简单了没有必要写。但是如果有像我一样的小白,希望能对你有帮助。毕竟,当初的我是多么渴望有这么一篇文章来帮助我。

原文链接:http://ask.dcloud.net.cn/article/35705

发表评论

登录后才能评论