效果图如下：
方法：
1.通过改变文字的显示方式（换行or不换行，即white-space的属性值）来实现动态改变文字框宽窄的目的。
在wxml中，通过判断一个js数据的真假来选择文字的class：
<text class="{{show ? 'textStyle1' : 'textStyle2'}}" catchtap='onClickBasic'>{{item.text}}</text>
show的值在js中决定：
Page（{
data:{
show:false,
},
onClickBasic: function(){
var that = this
var temBasic = that.data.show
this.setData({
show:!temBasic
})
}
}）
wxss中文字css为：
.textStyle1{
display: block;
line-height: 48rpx;
font-size: 25rpx;
font-family: MicrosoftYaHei;
padding: 10rpx;
text-indent: 10px;
text-align: left;
overflow: hidden;
}
.textStyle2{
display: block;
line-height: 48rpx;
font-size: 25rpx;
font-family: MicrosoftYaHei;
padding: 10rpx;
text-indent: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2.箭头的旋转
wxml中同样通过show的值来决定箭头的朝向：
<image class='select_img {{show&&"select_img_rotate"}}' src="/images/down.png"></image>
wxss中箭头及其旋转的css如下：
.select_img{
width: 30rpx;
height: 20rpx;
display: block;
transition:transform 0.1s;
}
.select_img_rotate{
transform:rotate(180deg);
}
！！注意：当使用template模板时，要同时将show的值传到模板界面，即传递多个参数。使用逗号将多个参数分隔开进行传递。（若未传递show的值，会导致下拉失效）：
<!--wxml-->
<template is="xxx" data="{{...item,show}}"/>
其中，xxx表示template的wxml的名字。
源代码：
Ps：显示的文字由后端获取，该处使用其他文本替代。
wxml:
1 <view class='select_box'>
2 <view>
3 <text class="{{show ? 'textStyle1' : 'textStyle2' }}" catchtap='onClickBasic'>新垣结衣是我老婆，石原里美也是我老婆，桥本环奈同样是我老婆。</text>
4 </view>
5 <view class='select' catchtap='onClickBasic'>
6 <image class='select_img {{show&&"select_img_rotate"}}' src="/images/down.png"></image>
7 </view>
8 </view>
js:
1 Page（{
2 data:{
3 show:false,
4 },
5 onClickBasic: function(){
6 var that = this
7 var temBasic = that.data.show
8 this.setData({
9 show:!temBasic
10 })
11 }
12 }）
wxss:
1 .select_box{
2 background: #fff;
3 display: -webkit-box;
4 word-break: break-all;
5 overflow: hidden;
6 -webkit-box-orient: vertical;
7 position: relative;
8 padding-left: 5px;
9 padding-right: 5px;
10 }
11
12 .textStyle1{
13 display: block;
14 line-height: 48rpx;
15 font-size: 25rpx;
16 font-family: MicrosoftYaHei;
17 padding: 10rpx;
18 text-indent: 10px;
19 text-align: left;
20 overflow: hidden;
21 }
22 .textStyle2{
23 display: block;
24 line-height: 48rpx;
25 font-size: 25rpx;
26 font-family: MicrosoftYaHei;
27 padding: 10rpx;
28 text-indent: 10px;
29 text-align: left;
30 overflow: hidden;
31 text-overflow: ellipsis;
32 white-space: nowrap;
33 }
34
35 .select{
36 width: 100%;
37 height: 30rpx;
38 display: flex;
39 justify-content: center;
40 }
41
42 .select_img{
43 width: 30rpx;
44 height: 20rpx;
45 display: block;
46 transition:transform 0.1s;
47 }
48
49 .select_img_rotate{
50 transform:rotate(180deg);
51 }