小程序练手项目之五抽取模板

  • 2018-04-17
  • 133
  • 0
  • 0

做过前端或者手机端的朋友都知道, 前后台交互使用json'或者xml数据 ;
上一篇文章我将文章列表的内容嵌套在了wxml文件中., 其实这样不对, 在前端代码中操作dom,给元素节点添加内容;
在微信小程序中也是一样, 使用小程序提供的模板对界面内容进行赋值操作;
微信提供了一系列的方法对数据进行渲染,数据绑定,列表循环,条件判断,模板,shi事件,引用等等,方便开发者快速上手进行开发;;

我们可以把上一届的代码进行抽取,使用列表循环对数据进行渲染;
例如我们创建一个数组,里面放置我们需要设置的json数据,

  var testjson = [
      {
        title:"两好三坏",
        content:"世界上最美好的爱情就是我爱你的时候你刚刚好也爱我",
      },
      {
        title:"枕边书",
        content:"我愿意做你手边的玫瑰",
      },
      {
        title: "意中人",
        content: "我愿意做你坟墓上的魂",
      },
      {
        title: "青玉锦绣",
        content: "君问归期未有期,却话巴山夜雨时",
      }
    ];

然后在页面加载的函数中给Page的data设置数据, 微信提供了一个方法用于给data数组赋值;

this.setData({
    infojson:testjson
});

然后是在页面中使用 列表循环对页面进行数据渲染

  <block wx:for="{{infojson}}" wx:for-item="item" >
    <view class='post-container' bindtap='touchInfo'>
      <view class='post-author-data'>
        <image class='post-author' src='../images/2.png'></image>
        <text class='post-data'>2017-10-10</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='../images/a.png' ></image>
      <text >{{item.content}}</text>
      <view class='post-like'>
        <image class='post-like-images' src='../images/chat.png'></image>
        <text class='post-like-font'>92</text>
        <image class='post-like-images' src='../images/chat1.png'></image>
        <text class='post-like-font'>66</text>
      </view>
    </view>
  </block>

这样就好了, 以后还会将文章列表抽成template;

评论

还没有任何评论,你来说两句吧

你必须 登录 才能发表评论.