十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

css读取HTML内容实现方法

CSS读取HTML LHY 2024-02-22 715
       从事小程序开发过程中,需要实现通过样式CSS读取HTML中的内内容,我通过实例向大家介绍功能实现方法,接下来由南昌小程序开发公司百恒网络开发工程师通过实例向大家介绍实现方法。

例如把更多拼接在省略号后面


<view class="dynamics-txt r-simpledata-etc="...展开">
 当一个人喜爱梭鱼跳跃的水声时,他是个诗人;当他知道了这不过是强者追赶弱者的声音时,他是个思想家。可是要是他不懂得这种追逐的意义所在、这种毁灭性的果所造成的平衡为什么有其必要时,他就会重<text>收起text>
view>
.r-simple::before{content:attr(data-etc); position: absolute; bottom: 0; right:0px; background: #fff; color: #999999;}




html:


 <view class="pd-10-0">
         <rich-text id="comment-rich-text-{{index}}" 
            nodes="{{ item.content }}" 
            class="r-content {{!!item.extendStr ? \'r-content-simple\' : \'\'}}">
         rich-text>
      view>
      <view class="extendBtnbindtap="extendEventdata-index="{{index}}" wx:if="{{item.extendBtn}}">{{item.extendStr ? \'收起\':\'展开\'}}view>



JS:

  //同图片加载完成计算文字高度
   listenCommentUserAvatarLoad: function (event) {
      let commentIdx = event.currentTarget.dataset.index
      var query = wx.createSelectorQuery();
      query.select(`#comment-rich-text-${commentIdx}`).boundingClientRect((rect) => {
         if (rect != null{
            const height = rect.height
            if (height > 120{ //Line-height 24 * 5 行
               this.data.dataList[commentIdx][\'extendStr\'= true;
               this.data.dataList[commentIdx][\'extendBtn\'= true;//是否显示展开按钮
               this.setData({
                  dataList: this.data.dataList
               })
            }
         }
      }).exec()
   },
   //展开事件
   extendEvent:function(event){
      let commentIdx = event.currentTarget.dataset.index
      let curItem = this.data.dataList[commentIdx];
      this.data.dataList[commentIdx][\'extendStr\'= curItem.extendStr ? false:true;//是否全部显示
      this.setData({
         dataList: this.data.dataList
      })
   },

以上都是南昌小程序开发公司百恒网络有十多年开发经验的开发工程师经过实际操作总的实用经验,希望对广大技术人员有所帮助。

百恒网络,专业专注于南昌小程序开发、南昌APP开发,南昌网站建设,为用户提供高品质网络产品和优质服务是我们始终的追求,欢迎来电咨询洽谈。



400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×