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


效果圖如下:

方法:

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 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM