微信小程序—動態(tài)下拉窗口

    1.通過改變文字的顯示方式(換行or不換行,即white-space的屬性值)來實現(xiàn)動態(tài)改變文字框?qū)捳哪康摹?b class="xhide">愛掏網(wǎng) - it200.com

    在wxml中,通過判斷一個js數(shù)據(jù)的真假來選擇文字的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.箭頭的旋轉(zhuǎn)

    wxml中同樣通過show的值來決定箭頭的朝向:

    image class='select_img {{show&&"select_img_rotate"}}' src="/images/down.png">image>

    wxss中箭頭及其旋轉(zhuǎn)的css如下:

    .select_img{ width: 30rpx; height: 20rpx; display: block; transition:transform 0.1s;
    } .select_img_rotate{ transform:rotate(180deg); 
    }

    !!注意:當使用template模板時,要同時將show的值傳到模板界面,即傳遞多個參數(shù)。愛掏網(wǎng) - it200.com使用逗號將多個參數(shù)分隔開進行傳遞。愛掏網(wǎng) - it200.com(若未傳遞show的值,會導(dǎo)致下拉失效):

    ?

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

    ?

    其中,xxx表示template的wxml的名字。愛掏網(wǎng) - it200.com

    ?

    Ps:顯示的文字由后端獲取,該處使用其他文本替代。愛掏網(wǎng) - it200.com

    ?wxml:

    1 view class='select_box'>
    2   view>
    3      text class="{{show ? 'textStyle1' : 'textStyle2' }}" catchtap='onClickBasic'>新垣結(jié)衣是我老婆,石原里美也是我老婆,橋本環(huán)奈同樣是我老婆。愛掏網(wǎng) - 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 }

    ?


    聲明:所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益,可聯(lián)系我們進行處理。
    發(fā)表評論
    更多 網(wǎng)友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 亚洲丰满熟女一区二区v| 麻豆视频一区二区三区| 国产精品成人国产乱一区| 日本在线视频一区二区| 国产一区二区精品尤物| 波多野结衣在线观看一区| 亚洲国产精品一区二区久久| 久久一区二区三区免费| 国产精品亚洲专一区二区三区| 91在线精品亚洲一区二区| 人妻免费一区二区三区最新| 一区二区三区高清在线| 日本美女一区二区三区| 一区在线免费观看| 一区二区三区免费电影| 亚洲国产精品一区二区九九| 无码人妻一区二区三区精品视频 | 国产一区二区三区免费观看在线| 国产一区二区精品久久岳√| 国产精品一区二区久久沈樵| 夜精品a一区二区三区| 午夜在线视频一区二区三区 | 在线中文字幕一区| 韩国理伦片一区二区三区在线播放| 国产午夜毛片一区二区三区| 波多野结衣在线观看一区二区三区 | 久99精品视频在线观看婷亚洲片国产一区一级在线 | 精品人妻系列无码一区二区三区 | A国产一区二区免费入口| 一区二区三区在线免费| 成人国产一区二区三区| 亚洲一区二区三区偷拍女厕| 国产伦理一区二区| 免费播放一区二区三区| 亚洲欧美日韩中文字幕一区二区三区| 韩国福利影视一区二区三区| 国精产品一区一区三区MBA下载| 亚洲av成人一区二区三区在线播放| 国产精品美女一区二区三区| 激情综合丝袜美女一区二区| 精品国产日韩亚洲一区|