微信小程序仿朋友圈查看全文效果

微信小程序仿朋友圈查看全文效果

效果：


主要思路：

• 初始样式设置一个固定高度，设置overflow: hidden;
• 点击查看原文，高度设置为auto
• 在初始样式下 添加蒙版营造渐变效果，点击查看原文取消蒙版

主要代码：

html:

<view class="wrapp1 {{is_zk?'wrapp2':''}}">
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011111
<!-- 添加蒙版营造渐变效果 -->
<view class="mask" wx:if="{{!is_zk}}"></view>
</view>
<view class="zk" bindtap='zk'>{{is_zk?'收起':'查看全文'}}</view>

css:

.wrapp1{
  width:100%;
  height:100rpx;
  line-height: 1;
  box-sizing: border-box;
  word-wrap:break-word;
  overflow: hidden;
  position: relative;
}
.wrapp2{
  height:auto;
}
.mask{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.5),#fff);
  background-image:linear-gradient(180deg,hsla(0,0%,100%,.5),#fff);
}
.zk{
  width:100%;
  text-align: center;
  color:green;
}

js:

/**
   * 页面的初始数据
   */
  data: {
    is_zk:false,
  },

zk:function(){
    var that = this 
    that.setData({
      is_zk: !that.data.is_zk
    })
  },

前端进阶精选：点此去