微信小程序—动态下拉窗口

效果图如下：

方法：

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 }

 

转载于:https://www.cnblogs.com/cff2121/p/9771358.html