作者： | 来源：互联网 | 2023-07-20 13:00
效果图如下：方法：1.通过改变文字的显示方式（换行or不换行，即white-space的属性值）来实现动态改变文字框宽窄的目的。在wxml中，通过判断一个js数据的真假来选择文字的cl
效果图如下：
方法：
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的值，会导致下拉失效）：
<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 }
京公网安备 11010802041100号