WeChat applet implementation folding and unfolding articles function

Requirements

page fold excess portion ellipsis, click to expand the display entirety

微信小程序实现折叠与展开文章功能

needs problems solved

  • arrow with expand change the folded direction of the arrow
  • when clicking the arrow text display content changes

how to solve?

  • change the direction of an arrow is a click event bindtap, replace the small icon click;
  • text change is a show or hide things, folding time there is a multi-line text overflow problems have five attributes (display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp, text-overflow, overflow)
  • state data style binding control

embodied

wxml

      company     entrepreneurship is a big probability of failure thing, we are pleased to now from the end of 2012 is still alive, but also live very well. There Chan's products are: to praise micro mall, there are like cash registers, retail to praise, praise and industry, there is praise wholesale, buyers have praised version, there are like tiny shop   In our view, phase. comparison of business, the company's core team is. Like there is no "staff" only "junior partner", and no one named "public" name "Division", we have a group of smart, Have sexuality, and skin partners, this is our largest asset.   Azanned small partners have now exceeded 1,000 people, accounting for 55% of engineers, we have a very strong engineer atmosphere, there are a lot of interesting sharing every week: Sharing with travel abroad, how to take Sharing, how to decorate the sharing of houses ... Technical sharing is even numerous. Our work is not very easy, but our atmosphere is very relaxed, very open, the company can see the engineer riding a wheelbarrow to go back and run, a lazy sofa, a nap basket, retro phone booth, etc., each month has a holiday, newcomer Performance, expansion, party, etc., for us, can be holiday every day. We advocate simple and straightforward communication, I hope to be a transparent company. There is no excessive level division here, you can make your own opinions and anyone PK. We have paid five insurances in the benefits, and 980 yuan a month, I will encourage everyone to eat and drink together. Engineers come with MacBookPro, large screen display and mechanical keyboard. There are standby snacks in the office, fruit, seating area with TV, game consoles, billiards, table tennis, four-wheel drive, board games are ready to relax. Reimbursement of taxi payment every night, providing you with your family and your family a year.      WXSS   
. Long-dec {padding-left: 20rpx; margin-top: -87rpx; display: -webkit-box; / * Key attribute * / font-size: 28rpx; color: # cfcfd0; line-height: 40rpx; Word-Break : Break-all; -Webkit-Box-Orient: Vertical; / * Key Properties * / -WebkiT-line-clamp: 6; / * Key attributes * / overflow: hidden; / * Key attribute * / text-overflow: Ellipsi; / * Over the content display omitted 号 * /}. hide {display: -webkit-box;} }. arrow {position: absolute; width: 40rpx; height: 43rpx; Left: 50%; Transform: Translate (-50%);}

   
Page ({data: {isfold: true,}, showall: function (e) {this.SetData ({isfold:! This.data. ISFOLD,})}

Summary

The above is the WeChat small program folding and unlocation article introduced to you. Implementation code, I hope to help everyone, if you have any questions, please leave a message, Xiaobian will reply to everyone in time. I am very grateful to everyone in Tumi Cloud website!
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment