效果圖如下：
方法：
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 }