3***@qq.com
3***@qq.com
  • 发布:2019-03-17 16:19
  • 更新:2019-09-25 15:05
  • 阅读:10341

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

分类:uni-app

作为一个刚刚了解一点微信小程序就被迫改用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",和普通的绑定不一样,我不知道如何传参。
2. 然后就是我不知到为何在method中的bindPickerChange又是有一个参数e的。我知道是自己基础不好,对e的认识很浅。我试图用console.log来获取e,看看其内部究竟有哪些值,但结果并不好。
3. 能不能用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的问题真的不该被卡住这么久。一个小白之所以会不自量力地写一篇文章也是想积累一些经验,和大家交流一下。而且,这个问题似乎都没有人写过,想着可能是太简单了没有必要写。但是如果有像我一样的小白,希望能对你有帮助。毕竟,当初的我是多么渴望有这么一篇文章来帮助我。

3 关注 分享
lijiamu 老酒一壶慰风尘 h***@163.com

要回复文章请先登录注册

老酒一壶慰风尘

老酒一壶慰风尘

回复 andOr :
每一步都做对才行
2019-09-25 15:05
老酒一壶慰风尘

老酒一壶慰风尘

真的帮到我了 谢谢!
2019-09-25 14:59
1***@qq.com

1***@qq.com

回复 andOr :
大哥 现在有办法更新了吗
2019-09-17 15:45
andOr

andOr

大佬我照你这样的写法为什么选择值更新不了啊
2019-05-10 16:05
liru07441019

liru07441019

亲,我想问你你是怎么学习uni-app的?
2019-04-15 14:00
MixR

MixR

支持一下,其实很多别人觉得理所当然的点,可能会让另一些人踌躇很久,不过当你把event打出来的时候还不知道解决方法,还是需要巩固一下基础的
2019-03-17 21:24