微信小程序—動態下拉窗口

1.通過改變文字的顯示方式（換行or不換行，即white-space的屬性值）來實現動態改變文字框寬窄的目的。愛掏網 - it200.com

在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的值傳到模板界面，即傳遞多個參數。愛掏網 - it200.com使用逗號將多個參數分隔開進行傳遞。愛掏網 - it200.com（若未傳遞show的值，會導致下拉失效）：

?

template is="xxx" data="{{...item,show}}"/>

?

其中，xxx表示template的wxml的名字。愛掏網 - it200.com

?

Ps：顯示的文字由后端獲取，該處使用其他文本替代。愛掏網 - it200.com

?wxml:

1 view class='select_box'>
2 　　view>
3    　　text class="{{show ? 'textStyle1' : 'textStyle2' }}" catchtap='onClickBasic'>新垣結衣是我老婆，石原里美也是我老婆，橋本環奈同樣是我老婆。愛掏網 - it200.comtext>
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 }

?