最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序?qū)崿F(xiàn)折疊與展開文章功能

 更新時(shí)間:2018年06月12日 10:53:10   作者:kerin  
最近做項(xiàng)目遇到這樣的需求,頁面折疊超出的的部分顯示省略號,點(diǎn)擊展開后顯示全部內(nèi)容。具體實(shí)現(xiàn)代碼大家跟隨腳本之家小編一起學(xué)習(xí)吧

需求

頁面折疊超出的的部分顯示省略號,點(diǎn)擊展開后顯示全部內(nèi)容

需要解決的問題

  • 箭頭隨展開折疊后箭頭方向的變化
  • 當(dāng)點(diǎn)擊箭頭文本顯示內(nèi)容的變化

如何解決?

  • 箭頭方向的變化是一個(gè)點(diǎn)擊事件bindtap,點(diǎn)擊后更換小圖標(biāo);
  • 文本變化是一個(gè)show或者h(yuǎn)ide的事情,折疊的時(shí)候有個(gè)多行文本溢出得問題五個(gè)屬性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)
  • 狀態(tài)與數(shù)據(jù)綁定控制樣式

具體實(shí)現(xiàn)

wxml

  <view class="company-detail">
    <view class="company-detail-content">
      <view class="weui-loadmore weui-loadmore_line">
        <view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司介紹</view>
      </view>
      <view class="long-dec {{isFold?'hide':'show'}}">
        <text class="first-dec">
          創(chuàng)業(yè)是個(gè)失敗概率很大的事情,我們很高興從2012底到現(xiàn)在還活著, 而且還活的很不錯(cuò)。 目前有贊旗下的產(chǎn)品有:有贊微商城、有贊收銀、有贊零售、有贊美業(yè)、有贊批發(fā)、有贊買家版、有贊微小店.
        </text>
        <text class="second-dec">
          我們認(rèn)為,相比較業(yè)務(wù)來說,團(tuán)隊(duì)才是公司的核心。有贊沒有“員工”只有“小伙伴”,也沒有人姓“公”名“司”,我們有一群聰明、有要性、又皮實(shí)的伙伴,這才是我們最大的資產(chǎn)。
        </text>
        <text class="last-dec">
          有贊的小伙伴目前已超過1000人,工程師比例占55%,我們有很濃的工程師氛圍,每周都有很多的有意思的分享:有出國旅游的分享、有如何搭訕的分享、有如何裝修房子的分享...技術(shù)分享更是數(shù)不勝數(shù)。 我們的工作不是很輕松,但我們的氛圍很輕松,很open,公司里隨處可見騎著獨(dú)輪車來回跑的工程師、懶人沙發(fā)、午睡吊籃、復(fù)古電話亭等等,每個(gè)月都有節(jié)日、新人表演、拓展、派對等,對我們來說,天天都可以是節(jié)日。我們倡導(dǎo)簡單直接的溝通方式,希望做一家通透的公司。這里并沒有過多的等級劃分,你可以隨時(shí)提出自己的意見和任何人PK。福利方面我們?nèi)~繳納五險(xiǎn)一金,每月980元的有贊E卡鼓勵(lì)大家一起吃喝玩樂。工程師標(biāo)配MacBookPro、大屏顯示器和機(jī)械鍵盤。辦公室里常備零食、水果,休息區(qū)有電視、游戲機(jī)、桌球、乒乓球、四驅(qū)賽車、桌游隨時(shí)供大家放松減壓。每天晚下班的打車費(fèi)報(bào)銷,每年給你和你的家人提供旅游和體檢等等。
        </text>
      </view>
      <image class="arrow" src=" {{isFold?'../../youzan-image/down.png':'../../youzan-image/up.png'}}" bindtap="showAll"></image>
    </view>
  </view>

wxss

.long-dec{
  padding-left: 20rpx;
  margin-top: -87rpx;
  display: -webkit-box;/*關(guān)鍵屬性*/
  font-size:28rpx;
  color:#cfcfd0;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;/* 關(guān)鍵屬性 */
  -webkit-line-clamp:6;/* 關(guān)鍵屬性 */
  overflow: hidden;/* 關(guān)鍵屬性 */
  text-overflow:ellipsis;/* 超出內(nèi)容顯示省略號*/
}
.hide{
 display: -webkit-box;
}
.show{
 display: block;
}
.arrow{
 position: absolute;
 width: 40rpx;
 height: 43rpx;
 left: 50%;
 transform: translate(-50%);
}

js

Page({
 data: {
  isFold: true,
 },
showAll: function (e) {
  this.setData({
   isFold: !this.data.isFold,
  })
 }

總結(jié)

以上所述是小編給大家介紹的微信小程序折疊與展開文章的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • JS typeof fn === ''function'' && fn()詳解

    JS typeof fn === ''function'' && fn()詳解

    最近在學(xué)習(xí)js的時(shí)候發(fā)現(xiàn)很多人都喜歡在JS 中存在fn && fn() 執(zhí)行語句或者typeof fn === 'function' && fn(),下面這篇文章就為大家分享一下
    2020-08-08
  • 通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序

    通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序

    這篇文章主要介紹了通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • uni-app動(dòng)態(tài)修改主題色的方法詳解

    uni-app動(dòng)態(tài)修改主題色的方法詳解

    最近在看uniapp開發(fā)app時(shí)需要實(shí)現(xiàn)動(dòng)態(tài)修改主題色的功能,這篇文章主要給大家介紹了關(guān)于uni-app動(dòng)態(tài)修改主題色的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • 微信小程序?qū)崿F(xiàn)滑動(dòng)刪除

    微信小程序?qū)崿F(xiàn)滑動(dòng)刪除

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JavaScript中的toString()和toLocaleString()方法的區(qū)別

    JavaScript中的toString()和toLocaleString()方法的區(qū)別

    本文給大家介紹JavaScript中的toString()和toLocaleString()方法的區(qū)別,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-02-02
  • JS實(shí)現(xiàn)簡單加減購物車效果

    JS實(shí)現(xiàn)簡單加減購物車效果

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單加減購物車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 在javascript中隨機(jī)數(shù) math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)

    在javascript中隨機(jī)數(shù) math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)

    本篇文章給大家介紹在javascript中隨機(jī)數(shù)math random如何生成指定范圍數(shù)值的隨機(jī)數(shù),由于math.random生成了一個(gè)偽隨機(jī)數(shù),之后還要經(jīng)過我們的后期處理。對隨機(jī)數(shù)math random感興趣的朋友一起了解了解吧
    2015-10-10
  • 純JavaScript創(chuàng)建一個(gè)簡單的待辦事項(xiàng)列表

    純JavaScript創(chuàng)建一個(gè)簡單的待辦事項(xiàng)列表

    這篇文章主要給大家介紹了關(guān)于純JavaScript創(chuàng)建一個(gè)簡單的待辦事項(xiàng)列表的相關(guān)資料,清單通常用于記錄我們在某一天需要完成的所有事項(xiàng),將最關(guān)鍵的任務(wù)放在最上方,將最不重要的事項(xiàng)放在最下方,需要的朋友可以參考下
    2024-01-01
  • javaScript中FormData使用方法示例

    javaScript中FormData使用方法示例

    這篇文章主要為大家介紹了javaScript中FormData使用方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn)

    uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn)

    在微信小程序中不支持多張圖片上傳,需要做循環(huán)實(shí)現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn),需要的朋友可以參考下
    2023-04-04

最新評論

卢龙县| 南川市| 玉树县| 沙河市| 正镶白旗| 浦城县| 洪泽县| 南通市| 延吉市| 游戏| 广河县| 宁武县| 北安市| 门头沟区| 周至县| 荔浦县| 普宁市| 石首市| 郁南县| 依兰县| 九江县| 清水县| 南江县| 朔州市| 兴隆县| 莎车县| 定结县| 海林市| 广东省| 和平县| 宜城市| 锡林郭勒盟| 沅陵县| 芜湖县| 介休市| 光泽县| 昭觉县| 银川市| 雅江县| 江孜县| 沙雅县|