微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置

1.背景：

在某些场景下，例如在某些详细信息内容展示数据量特别大的时候（有时候特别小），当数据量特别大的时候，需要做展示固定高度，展开更多内容完全展示，收起内容又还原。当内容特别少的时候，例如小于3行，不展示更多按钮。（小程序内容获取的时候是不能知道当前内容有几行的，可能有人会说，我知道字体大小一行内放几个字，几行就再乘以几，让后台算好，传两个字段，展开收起，分别用两个字段即可，理论上是可行的（但太麻烦，如果有图片有文字呢，这种思路就歇菜了））。其实前端在渲染的时候也不知道有几行，但可以获取内容高度，通过内容高度进行比较即可。

2.代码

2.1wxml

2.2wxss

.richText {
  position: relative;
  margin-top: 30rpx;
}

.pb68 {
  padding-bottom: 68rpx;
}

.richText-sj {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAABuCAYAAADBJhBzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRjIzMzAzODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRjIzMzA0ODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGMjMzMDE4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGMjMzMDI4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4hEh1+AAAQEklEQVR42uzd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);
  background-size: 100% 110rpx;
  background-position: center;
  background-repeat: no-repeat;
  height: 110rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.richText-msg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAfCAMAAADEKUFYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTI2OTQxN0E4NTJEMTFFQUI1MjdDREYyMTM5MkYwRDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTI2OTQxN0I4NTJEMTFFQUI1MjdDREYyMTM5MkYwRDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MjY5NDE3ODg1MkQxMUVBQjUyN0NERjIxMzkyRjBEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MjY5NDE3OTg1MkQxMUVBQjUyN0NERjIxMzkyRjBEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjt2qiYAAADDUExURf/27//u3//Ln/9+EP+pYP/lz/+PMP+GIP/Cj//Ur/+ycP+gUP/9/P99Dv+II//w4/92Av96Cf94Bf/69f/8+f+taP+mWv+RM/+AFP+EG//bvf+fTf/s2/+pYf/hx/+2eP/y5//hyP/JnP+7gv/p1v/Pp//dwP/n0v/Vsf+hUf+fTv+LKP+DGv+NLP+BF/+0df+YQf93BP+cSP+nXf/HmP/OpP+aRP/Cjv/t3f+0dP/m0P/06v+YQP+6f//cv/91AP///w4JD5MAAABBdFJOU/////////////////////////////////////////////////////////////////////////////////////8AMFXsxwAABL9JREFUeNrEmWeD3CgMhsHY4JLdlEtPrvfeO0b8/191ophiY8aebHJ8yA4zBvRg6ZUgRN9JI/TM052i1y5EyXX2pR0FUH8aH1Cl7xvGutoibW6chHnv0Qagqcwkgf+PmET45WXWRv8zh3wX9jGRsso5wP4OvX1M3QFYJsiaXIYxYM32563JSNm2AP2+BSMwegeYNSMqmHoGMC9sTpoMmJpy944uYI5IqXVr/92zV1R+fDPMJlhuLAidHFjAuCGXcRme+mLZacnk+XDLOKkEL31zTJU0Gqwqtjlz9U4tk5GGbDAN5wXMToSdQBSWbGKXBTyAKIT/HcTmGCbFd8JDp1mN6sW0GLnF1GSoS9CconUMY53sOFkx/N++BC2jUIYGp6ttAbNs7jKbwlcpE2ck5qUtG0N9vKSBP6O2mz/NO8dELkZslx7GdE/SaStHPb5QmS7GYEjtrufXIuYYfTJ6fXcaE2WoN0LZZhJEXaCTkpoI+0BrnG+zHDWSkIC2MOVKtKNSv3z9ePXNe398S3Y1Rp3HVLjBNCQ2jzln03FbELlNnJw4I6Vo9NYAPYg0hapMYuVuXnkGr+7llD/BM48p51U7jynXe+QxGyePKhQKg8mfymyITbWaipnoEqYZm6WsSEZ3E7i+fwtPU87Hr+D7f8mO8sVpKjLnngmYPGq+WsVmmI6YEoDY7ux8dtks13p8gf5jLWO2ldr2rxfwJPbufQO3H+m7xFT54C2mMkliYNx1WSl77tdZRsJlrC2Hfb357Dn8GCifwu19fQAzLRiSvY66chwTPRZjret8dyDnMFVQV1nPl90NfOo/vg8vXusjmMdj8yKmEc+J7M5+CRM1y8lbX3vItA8eeu16Aj+81u8a0xxMrY5ciWnOe2gwZXCpxnv5CD7BP3/D8y91gllX2pBEoxFYZ24w23xwUYI6TkuYtBQWtHTek6Y85hfvEL76+cHn+kO4+UenmPW8GToq/XQwocQZaHLQ8Z+aWNHunw02B9LqVYVvvz949CvcfJxWQc1caPQkJk6C1SwiCD94g6n2K++jmBevF2L7DeDhF8Wadq8dwrSKr7AnC+dNM46Et8lCkDSnYtMVCSCOXXv9+d3LrKbtRLJaN7gsLs9jYp2nK5gT2SSGkxLkTi75YfR46d5ae7gtvXzlqDKXOYg5GRV1mDMf1phtyOjG1JZcg4m1IjRDdhg9jNm5mX1W4U6sR19wnsBsbVZzmBLWmDwULihAePBi82lMgiON+pibJaHOYsrlJMGT0xHi8lOY5iZnsD0cTxhuUo65OKqxdbSFglCnMAmGNEwkKJbsTmH2sTQl7rw6+BQ1RyP7dVbrc0w6Ms9BnUqyLDa7QNkIf69lXe84pl0g3Cdg2jaOf/yNEsqW841fQPrV53ggKNftGSYD3gWfBHMtS5LCs3GpjhhI1seLPFsr1O56HAhtDBWb04A0h1GQR28Q0BhGlnQwu4JRLJWVjJElV42vnLZZLdjmic96mE2ObczH6BHiCKYdJ/q16jTcsB+7zSQdVzoRSuNggnr/UvsFbjFvrtL4Wk0pYy3NhdNlL7XbyDKu6J9qyi5Ojl150fVX8QZxe5ND4rGXqKMxsr3vuXLc6f8g+0+AAQBjNnVdi/eSkAAAAABJRU5ErkJggg==);
  background-size: 100% 31rpx;
  background-position: center;
  background-repeat: no-repeat;
  width: 230rpx;
  height: 40rpx;
  margin: 70rpx auto 0;
}

.richText-msg.on {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAfCAMAAAAm2ZhkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjE5MjhDRkY4NTJEMTFFQUE1RjRDOEY0QjhCNDI2Q0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjE5MjhEMDA4NTJEMTFFQUE1RjRDOEY0QjhCNDI2Q0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTkyOENGRDg1MkQxMUVBQTVGNEM4RjRCOEI0MjZDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MTkyOENGRTg1MkQxMUVBQTVGNEM4RjRCOEI0MjZDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn7UgnsAAADDUExURf/27/+PMP9+EP/lz//u3//Cj/+pYP+ycP+GIP/Ur//Ln/+gUP/9/P99Dv+II//w4/96Cf/s2//69f/bvf/8+f94Bf+mWv+AFP+RM/+fTf92Av+taP+EG/+LKP/hx//06v/Pp/+nXf/p1v/Vsf/m0P+fTv+7gv+NLP+pYf/JnP+DGv+2eP/dwP93BP+YQf+BF//hyP/Cjv/t3f+aRP+0dP+cSP+0df/n0v/y5//OpP/HmP+hUf+YQP/cv/+6f/91AP///yqM+5oAAABBdFJOU/////////////////////////////////////////////////////////////////////////////////////8AMFXsxwAAAktJREFUeNq0lteapCAQhRHE1GFynk0zm3OOwvH9n2oBUVCZXpvprRuVT+uHOhUkzTxjgjTR1n8qUZurAELv1RA7hHAUGyHCGYuGZFhshMBZHQ0pwP8DxIpgISkwigKrtVEk+pK7dRkP4d5OIW0mBDd/D0gygRAjcgI+0joeoqJVGaccVIh0UwrHQ/IugcXIxQ4hhHaQ8r6QT6+P7oBIJUQadNFD5LwU/g3svw1C1EGoLZO8Vd24920m5NflyROsPoYgShGGxLrmd0L+3VZu310+bt5g9XQKUQcpVcWbb+lIg75vynADHdjRCV6py1ec/ZiepFzoa6bLfOxqG8jDfRuGK3w4CBWjrhSiC98FXCT1VhC2wnN7+xLXByGIasNSFz73DpGEIWFNbs7wvbtfnmK9F4II0JR1mdzXpXpLKhMeRAQnz+drXLmn5TOsf/YQVvcBqpENhgq3kLab+ZBA4PbWOF16z8cXePHIQFheeGnPtDfhl3ZuPOpWX3kQbrN9YOe4WA4WDt/jnJDMbJEWTup8WGe1hfSatJEkicnDkX37czxaOfzygKiKAM0qv4+omeKP4EKJ5CAl2jPpmVDNbpAyL4fNquxHSZfTSIgTwE2cRfSMbxhFLb1dVihUYEqnsuDSJNrsn5UppNL7VsXSUzJkqW6caKJtBCG5YWhVO1mpwqnTAWW6G0ipUnlhlshC0VirkIa2vVj/sUhneRUBUceg3EtknaxdXYps8I/RGo+ApLT2QiKK3JRD6RJNWNE7S7eEhJ7IdC3K/gowAAfyzoxv2MoOAAAAAElFTkSuQmCC);
  background-size: 100rpx 31rpx;
}

.h1980hidden {
  max-height: 1980rpx;
  overflow: hidden;
}

.pb100 {
  padding-bottom: 100rpx;
}

rich-text .rich-img {
  max-width: 100%;
  height: auto;
}

2.3js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 展开收起
    more_flag: 0,
    // 三角开关是否需要展示
    sjFlag: 0,
    // 富文本内容
    rich: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 这是一个从接口请求来的富文本内容
    var content = '"
“放风价”这个名词，在现阶段的南京新盘市场上出现频率尤其高！大校场放风5.5万元/㎡+、燕子矶仁恒放风4万元/㎡+……纯新盘要上市，老盘要加推，先来个放风价，但楼盘的“放风价”其实并不完全是楼盘的开盘价，是给购房者一个心理预期和试探！
近期，南京河西也有一大波纯新盘开始放出风声，多盘价钱让人咋舌！同时西妹了解到，部分楼盘放风价也呈现“高开低走”状态。
云际花园前期放风5.5万元/㎡--价格或不超过5万元/㎡
苏宁檀悦前期放风6.4万元/㎡--价格或有惊喜
海玥花园放风6.7万元/㎡……
荣盛江心洲G08地块放风6万元/㎡……
深业河西南G77地块放风4.5万元/㎡……
【最终价格以销许为准！】
上市时间：
云际花园：预计5月
苏宁睿城：预计5月公开售楼处，6月首开
海玥花园：预计今年上市
荣盛江心洲G08地块：预计今年下半年上市
深业河西南G77地块：预计今年上市
均预计今年上市！高放风价新盘一览
云际花园
云际花园规划将打造5栋17-27F层精装平墅豪宅、1栋幼儿园、1栋社区。其中，住宅共计380户，层高3.15米，一梯一户，超高得房率、低密度。
据了解，云际花园1、2、4、 5#总高均为17层，3#总高为27层。户型分布：1、2、5#均为140㎡；3#均为160㎡；4#均为180㎡。
首开价格：具体以销许价为准
首开楼栋：5#共计68套房（20%约14套房作为人才房优先人才选择）
首开户型：140㎡
业主总数：380户
车位配比：1:1.38
得房率：约80%
最新动态：纯新盘云际花园由保利、招商、国贸联合开发，项目预计首开5#，共计68套房（20%约14套房作为人才房优先人才选择），均为140㎡四房起步户型。
云际花园预计首开5#，共计68套房，均为140㎡四房起步户型。双入户大堂设计，其中，地上大堂层高约6.3米，地下约5.4米。
据了解，5号楼1、2层房源均为带地下室的下跃的设计，负一楼都是算产权面积的。
140㎡户型1楼+负一层地下室户型↓
其中，1楼带的负一层地下室面积约175㎡左右。
140㎡户型2楼+负一层地下室户型↓
2楼带的负一层地下室面积约230㎡左右。
5号楼标准层140㎡四房两厅两卫↓
四开间朝南设计；南向大阳台连接客厅和次卧；主卧为L型衣帽间、卫生间为一体的套间，从户型图看主卫可放置浴缸；除了带阳台的次卧外，每个卧室都带有飘窗；U型厨房设计。
其余两大主力户型（首开只有140㎡户型）
160㎡四房两厅两卫：
160㎡和140㎡的区别点在于客厅面积大了不少，客厅不是传统的大长间，大横厅设计，尺度感更强；还有一处区别在于北阳台，160㎡南北双阳台设计，更通透。
180㎡四房两厅三卫↓
180㎡户型又是160㎡户型的升级版，除了大横厅、南北双阳台以外，双套房设计更符合当代购房者的需求。
若以4.9万元/㎡上市（具体价格以销许为准）：
140㎡最低3成首付约206万元/套，160㎡最低3成首付约235万元/套，180㎡最低3成首付约265万元/套。最大户型180㎡不到300万即可入手！
但西妹认为，若真以4.9万元/㎡上市，首付3成的可能性比较小，大家可以按照8成的预算准备。
苏宁檀悦
苏宁睿城三期确定案名为苏宁檀悦，将打造苏宁置业最高端产品系檀悦系产品，售楼处预计将于5月对外公开，6月上市！
 
前期小道消息称：苏宁檀悦价格或参考中国府6.4万/㎡的价格。现据了解，苏宁檀悦上市价格或有惊喜。【具体上市价格以销许为准】
苏宁檀悦由（E01E02）地块和（D0405）地块16栋楼共计892套房组成，预计2022年下半年交付，户型面积为160㎡、190㎡、240㎡。
西妹拿到了详细的户型分布，具体的面积还以届时开发商公布的为准：
（E0102）地块规划打造10栋楼，由4栋14F以及6栋28F的住宅组成，该地块中分布了三大户型，160㎡、190㎡和240㎡户型，共计544套房：
160㎡户型，分布在1#、2#、3#、4#号楼，均为14层，共计8个单元，共208套；
190㎡户型，分布在5#、6#、9#、10#号楼，均为28层，共计4个单元，共224套；
240㎡户型，分布在7#、8#号楼，均为28层，共计2个单元，共112套。
（D0405）地块规划，规划打造6栋29F住宅、幼儿园及社区中心，该地块中分布了2大户型，190㎡和240㎡户型，共计384套房：
190㎡户型，分布在4#、5#、6#、7#号楼，均为29层，共计4个单元，共232套；
240㎡户型，分布在8#、9#，均为29层，共计2个单元，共116套房。
曝光户型图如下，最终户型图以开发商公布为准。
160㎡户型图↓
户型解析：160㎡户型为4房2厅3卫设计，该户型4开间朝南，主卧套间设计，双阳台连接次卧与客厅，其他3房均设有飘窗。
190㎡户型图↓
户型解析：190㎡户型同样也是4开间朝南的户型，整室较为周正，其客厅与“书房”之间没有墙体，整个活动区域空间特别大，舒适度高，主卧为套房设计，私密性强。
240㎡户型图↓
户型解析：240㎡户型为5房2厅3卫设计，该户型多开间朝南，采光面充足，整室较为周正。活动区域为大横厅设计，空间阔绰大气。
若苏宁檀悦以5.5万元/㎡以内的价格上市（具体价格以销许为准），你会买单吗？
海玥花园
海玥花园项目地价为42561元/平方米，规划分为A、B两个地块，共打造20幢住宅，限高60米。
海玥花园是河西中地王，其上市价格备受关注！之前传出放风6.7万元/㎡，但开发商较为谨慎，对于价格比较敏感，具体还是以销许为准！
户型面积：打造240-480㎡户型，平层和复式两类产品
层高：16-18小高层
容积率：≤2.2
车位比：1:2.5（具体以开发商公布为准）设有超大尺度车位
总户数：540户
装修情况：精装交付
绿化率：30%
物业：海玥物业
A地块规划建设8栋住宅，1、3、4、5、6、8号楼为18层，2、6、7号楼为17层。
B地块规划建设打造12栋住宅，12、13、15、20、21号楼为18层，11、14、16、18、19号楼为17层，17号楼为16层。
海玥花园分A、B两个地块都设置了下沉式广场和会所，下沉式广场可直接通往会所，A、B地块两个会所之间后期可通过小区负2楼进行连通。
A地块会所主打社交会所，意欲打造成艺术馆。
B地块会所主打运动会所，内含泳池、健身房、瑜伽馆、羽毛球馆等等。其中比较特殊的是，两大会所也都是带科技系统的，恒温恒湿恒氧。
240㎡4房4卫A户型（实际使用面积约177.3㎡）▼
240㎡5房3卫户型（实际使用面积约185.7㎡)▼
从330平米复式看起，“壕”字已经无法形容了！330㎡跃层户型，一层大通间，挑高客厅，大阳台↓
王炸500㎡跃层户型，四层产品，即使是三维立体的户型，我也无法想象实景500㎡跃层是什么样的↓
海玥花园位居河西中黄金地段，据之前的消息：海玥花园上市价格52000元/㎡销许价+15000元/㎡装修包。
不过由于葛洲坝南京中国府的地价高于海玥花园，而中国府开盘销许均价为6.4万/㎡，所以之前传出的小道消息是否准确？拭目以待。
荣盛江心洲G08地块
荣盛江心洲G08地块仅100余套房，户型面积230-360㎡，起步户型230㎡、主力户型280㎡、最大360㎡，预计今年下半年上市，放风价6万元/㎡。
荣盛江心洲G08地块共打造12栋楼，均为7层洋房，这样的低密度产品在河西并不多见，项目紧邻着胜科星洲府和夹江。
 从规划图看，楼间距非常大，小区景观打造空间大，作为荣盛在河西的第一个项目，还是非常值得期待的。
去年4月，荣盛江心洲G08地块以楼面价31980元/㎡，一举成为江心洲地王。
而就在昨天，镇江中南新锦城房地产发展有限公司和江苏水利房地产开发有限公司联合拍下，以30.8亿元拿下，楼面地价35274元/㎡，刷新江心洲区域楼面地价。
目前江心洲在售房源寥寥，仁恒江湾世纪高层以4.5万元/㎡收官，后期仅有洋房和叠墅房源待加推，其价格一定会高于高层收官价。随着地价的攀升，未来江心洲上市房源价格值得关注！
深业河西南G77地块
近日，深业河西南G77地块规划出炉，项目分为A、B两个地块。
项目将打造5栋18F住宅和1栋物业用房，B地块则建造1栋6F的基层社区服务中心。项目精装曾放风为4.5万/㎡。
G77地块地理位置优越，临近地铁S3号线高庙路站，交通便利。
河西南G77地块，处于国资G75地块与建发G03地块中间，地块方正，体量较小。去年11月13日，在竞拍22轮后，被深业以总价12.3亿拿下，楼面地价29498元/㎡。
目前河西南板块内房源并不多，仅剩华润置地鱼嘴润府以及即将加推的葛洲坝中国府和河西金茂府，周边二手房价最高达6.2万/㎡。
河西南未来待上市地块还是比较多的，后期的升值空间值得想象！
放风价不等于实际价格！究竟上市价格如何？拭目以待……
何来放风价一说？又为何放风价与开盘价并不能吻合，究其原因主要有以下几点：
1、物价管控
对于房价，一直以来都受到物价局的管控。其实，相当一部分楼盘想涨价，但因为物价局的限价，房价一直不能达到开发商的预期。
2、开发商评估购房者的心理价位
对于纯新盘而言，首先参考周边楼盘的价格，价格高怕购房人不买账，价格低觉得卖亏了，这就是开发商与购房者之前的一场博弈，最终的开盘价还得看购房者的接受程度。
3、地价是重要参考因素
土拍市场火热！若区域地王一出，周边楼盘立马放风要涨价，至于最终的结果，能不能成功，请参照第一条。
所以说，放风价只是开发商的心理预期，结果如何，还得看政府、市场、购房者，三者缺一不可！
你怎么看待开发商的放风价格，这几个楼盘你的心理预计价格又是多少？欢迎留言和我互动~
"';

    /**
     * 1.请求来的富文本内容的img有自身的一些宽高属性，宽度可能都超过屏幕最大宽了;
     * 2.为了正常展示图片文本不错乱，需要将内容处理;
     * 3.正则是一个好东西（下边有一段正则匹配）
     * 4.大概意思：将图片自带的  宽  高  alt style classname 等属性都清除掉，同时给img标签加一个我们自己写的classname rich-img 来统一控制img样式；
     * **/
    var content_new = content.replace(/ {
      /**
       * 虽然变为同步的了，但是如果涉及数据量比较大的情况，计算高度还是不会特别准确
       * **/
      setTimeout(function () {
      var query = wx.createSelectorQuery();
      // 获取设备信息，通过宽高比计算当前机型的限制高度
      wx.getSystemInfo({
        success: (res) => {
          var radito = res.windowWidth / 375;
          var height_my = 1980 * radito / 2;
          // 通过获取当前dom节点的高度和所需的高度对比，如果高了就展示下拉，否则不展示
          query.select('#richText-rich').boundingClientRect(function (rect) {
            // console.log('rect', rect)
            // console.log('height_my', height_my)
            // console.log('height_my < rect.height', height_my < rect.height)
            if (height_my < rect.height) {
              that.setData({
                sjFlag: 1
              });
            }
          }).exec();
        },
      });
      }, 300);

    });
  },

  // 点击展开收起
  click_more() {
    var that = this;
    that.setData({
      more_flag: !that.data.more_flag
    });
  },
})

2.4效果

   

3.说明

3.1 清除图片默认样式用这段

/**
     * 1.请求来的富文本内容的img有自身的一些宽高属性，宽度可能都超过屏幕最大宽了;
     * 2.为了正常展示图片文本不错乱，需要将内容处理;
     * 3.正则是一个好东西（下边有一段正则匹配）
     * 4.大概意思：将图片自带的  宽  高  alt style classname 等属性都清除掉，同时给img标签加一个我们自己写的classname rich-img 来统一控制img样式；
     * **/
    var content_new = content.replace(/

3.2在获取容器高度，和所需高度对比时，需要用到延时器，当内容量比较大时，获取的高度会不准确：

that.setData({
      rich: content_new
    }, () => {
      /**
       * 虽然变为同步的了，但是如果涉及数据量比较大的情况，计算高度还是不会特别准确
       * **/
      setTimeout(function () {
      var query = wx.createSelectorQuery();
      // 获取设备信息，通过宽高比计算当前机型的限制高度
      wx.getSystemInfo({
        success: (res) => {
          var radito = res.windowWidth / 375;
          var height_my = 1000 * radito / 2;
          // 通过获取当前dom节点的高度和所需的高度对比，如果高了就展示下拉，否则不展示
          query.select('#richText-rich').boundingClientRect(function (rect) {
            // console.log('rect', rect)
            // console.log('height_my', height_my)
            // console.log('height_my < rect.height', height_my < rect.height)
            if (height_my < rect.height) {
              that.setData({
                sjFlag: 1
              });
            }
          }).exec();
        },
      });
      }, 300);

    });