小程序：数据绑定的实战应用

JS代码

post.js:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log("onload")
      var content = {
          title: "2020LPL夏季赛季后赛观赛指南",
          content: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
          imgSrc: " /images/lpl.png",
          reading: 102,
          detail: "8月9号，LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG.SN、v5、LGD、wE、FPX",
          Icollection: 92,
          dateTime: "24小时前",
          headImgSrc: "/images/lpl.png",
          author:"猫是猫的猫",
          date: "Nov 202020",
          avatar: "/images/avatar/5.png",
          posttd: 3,
      }
      this.setData(content)
  },

WXML

post.wxml:

<view>
    <swiper interval="2000" circular vertical indicator-dots="{{true}}" 
     autoplay="{{true}}">
        <swiper-item>
           <image src="/images/bestplayers.png"></image>
        </swiper-item>
        <swiper-item>
            <image src="/images/lpl.png"></image>
        </swiper-item>
        <swiper-item>
            <image src="/images/jumpfly.png"></image>
        </swiper-item>
    </swiper>
    <view class="post-container">
        <view class="post-author-date">
            <image class="post-author" src="{{avatar}}"></image>
            <text class="post-date">{{date}}</text>
        </view>
        <text class="post-title">{{title}}</text>
        <image class="post-image" src="{{imgSrc}}"></image>
        <text class="post-content">{{content}}</text>
        <view class="post-like">
            <!-- <image  class="post-like-image" src=" /images/icon/chat.png"></image> -->
            <l-icon name="favor" size="32" color="#666" class="post-like-image" />
            <text class="post-like-font">{{collection}}</text> 
            <l-icon name="eye" size="32" color="#666" class="post-like-image" />
            <!-- <image  class="post-like-image" src=" /images/icon/view.png"></image> -->
            <text class="post-like-font">{{reading}}</text> 
        </view>
    </view>

效果图

.