一:后台传回的json数据含有html标签,无法在wxml正确显示- 引用插件 htmlToWxml.js
// xxx.js var R_htmlToWxml = require('../../util/htmlToWxml.js');//引入公共方法
- 将html内容转成json数据
// xxx.js onLoad:function(){ var that = this; wx.request({ url: '', data: {}, header: {'content-type': 'application/json'}, success: function(res) { console.log(res.data); var sherry=res.data; that.setData({ silen:R_htmlToWxml.html2json(sherry.post.content) }) } }); }
3.页面显示 <!-- xxx.wxml --> <block wx:for="{{silen}}" wx:for-index="idy" wx:for-item="cellData"> <block wx:if="{{cellData.type == 'view'}}"> <view class="p"> <block wx:for="{{cellData.child}}" wx:key="text"> <block wx:if="{{item.type == 'a'}}"> <text class="a" data-seccode="{{item.attr['data-seccode']}}" data-secname="{{item.attr['data-secname']}}" bindtap="stockClick">{{item.text}}</text> </block> <block wx:else> <text>{{item.text}}</text> </block> </block> </view> </block> <block wx:if="{{cellData.type == 'img'}}"> <image class="img" data-index="{{idy}}" style="height: {{cellData.attr.height?cellData.attr.height:0}}px" mode="aspectFit" src="{{cellData.attr.src}}" bindload="imageLoad"></image> </block> </block>
此方法亲测可用 插件地址: 插件下载:html-to-wxml-master.zip 二:滚动到某个位置添加class效果<scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollY}}"><view>假设这里有一块内容</view><view class="{{scrollTop>200 ? 'topnav' : ''}}"> topnav是希望页面滚动到某出添加的类。变成置顶导航。</view>。。。。</scroll-view>
页面结构大致如上。 下面是js //滚动监听 scroll: function (e) { // console.log(e) ; var that = this,scrollTop=that.data.scrollTop; that.setData({ scrollTop:e.detail.scrollTop }) // console.log('e.detail.scrollTop:'+e.detail.scrollTop) ; // console.log('scrollTop:'+scrollTop) }
data里面先定义一下scrollTop. |