移动端 选择框内容过长解决方案之一 以vux popup-picker为例子。

前言

移动端 选择框内容过长解决方案之一 以vux popup-picker为例子。
vux popup-picker当选项值过长的时候全部显示解决方案之一。
该说的，都写在注释中了。

效果图

---

实现步骤

1.对popup-picker组件添加on-shadow-change函数(即滑动picker时触发)

<popup-picker @on-shadow-change="onShadowChange" :columns="3" title="标题" :data="data" v-model="val" show-name></popup-picker>

2.在css中用css3动画 animation属性写好横向滚动的样式

.vux-popup-picker .vux-flex-row .vux-flexbox-item:nth-child(3) .scroller-item {
	/*统一piker选项值文字居左对齐，保证在滚动结束后文字能统一居左*/
	/*以此类推，如果是其他的框架组件，也是这样，先找到对应piker样式再更改*/
	text-align: left;
}

/*使用css3 animation属性实现滚动*/
.changeClass {
  overflow: auto!important;
  width: 300px; /*需要设置宽度*/
  -webkit-animation: marquee 3s linear 1;
  animation: marquee 3s linear 1;
}
@keyframes marquee {
  0% {
      transform: translateX(10px);
  }
  100% {
      transform: translateX(-210px);
  }
}

3.声明onShadowChange函数，控制什么时候滚动

onShadowChange() {
	// divVaue获取到选择项的文字值，divWidth为当前选项块的宽度 - 关键是找到对应的值即可
	var divVaue = $(".vux-popup-picker .vux-flex-row").find(".vux-flexbox-item").eq(2).find(".scroller-item-selected").text(), divWidth=$(".vux-popup-picker .vux-flex-row").find(".vux-flexbox-item").eq(2).width();
	if (divVaue && divVaue!=="" && divVaue!==" ") { //当第三选项有值得时候
		$(".vux-popup-picker .vux-flex-row").find(".vux-flexbox-item").eq(2).find(".changeClass").each(function() {
			$(this).removeClass("changeClass");//清除changeClass，保证往回滑或者关闭后重新选择能继续滚动
		});
		if (divVaue.length >= parseInt(divWidth/16)) {
			//当文字超出或者等于第三选项块的宽度的时候横向旋转一圈，全部显示。(当前字体大小为16px)
			$(".vux-popup-picker .vux-flex-row").find(".vux-flexbox-item").eq(2).find(".scroller-item-selected").addClass("changeClass")
		}
	}
}

---

总结

通过piker滑动的函数来触发是否需要滚动以显示全部的文字。关键是找到对应的节点位置和css3动画滚动样式。

关于此类问题，即便是框架组件不同，均可以此类推来实现。
即：

1. 找到节点位置(如通过jq去找 class节点)；
2. 通过js在对应节点上添加滚动的css样式。