咫尺论坛 › 微信小程序开发教程 › 微信小程序学习用demo：新闻，列表，详情，收藏（带解释）

柿霖不是林 发表于 2017-1-13 12:51:35

微信小程序学习用demo：新闻，列表，详情，收藏（带解释）

本帖最后由 柿霖不是林 于 2017-1-13 12:58 编辑


undefined好像发过了，这个是更新后的版本；
作者的话：小程序版本更新必出bug，原先的this.data的绑定数据没法用了必须用官方的setData；这个版本修复了this.setData的变态设置，增加新闻详情页面，增加了收藏功能





var postsData = require('../../data/posts-data.js')//定义一个变量用来接收其他页面传来的数据用requirerequire，路径只能用相对路径，用绝对路径是找不到的

Page({
data: {
    //小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A
    //而这动作A的执行，是在onload事件执行之后发生的
},
onLoad: function (options) {
    // this.setData({posts_container: postData.postList });
   this.setData({
      postList:postsData.postList
    })
},
onPostTap: function (event) {
    var postId = event.currentTarget.dataset.postid;//此处postid要改为小写
    // console.log("on post id is "+postId);
    wx.navigateTo({
      url: 'post-detail/post-detail?id='+postId
    })
}
})




<import src="post-item/post-item-template.wxml" />
<view>
<swiper indicator-dots='true' autoplay="true" interval="5000">
    <swiper-item>
      <image src="/images/wx.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/vr.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/iqiyi.png"></image>
    </swiper-item>
</swiper>
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">

    <!--把内容放在对象里面，组成数组，对内容进行数据绑定，再搭配for循环-->
    <view catchtap="onPostTap" data-postId="{{item.postId}}">
      <template is="postItem" data="{{...item}}" />
    </view>
    <!--这里的item的前面加入三个.可以在数据绑定标签内免去写itemitem.
    等于是展开json数据的意思，不需要用前缀指定了-->
</block>
</view>
**** Hidden Message *****

一世迷离 发表于 2017-1-14 10:55:43

新闻，列表，详情，收藏（带解释）

yongyuan1110 发表于 2017-1-16 11:07:04

新闻，列表，详情，收藏（带解释）

mx8197 发表于 2017-2-13 13:31:26

支持楼主，学习一下

伴之则暖〆 发表于 2017-6-23 15:08:18

啥也不说了，感谢楼主分享哇！

baaii 发表于 2017-7-5 14:29:56

回的人少，我来小顶一下

ricky 发表于 2017-7-5 16:47:32

啥也不说了，感谢楼主分享哇！

baddie 发表于 2017-7-31 15:13:25

啥也不说了，感谢楼主分享哇！

15877310350 发表于 2017-11-15 16:36:45

正需要文章收藏功能

平步星云 发表于 2018-1-30 12:29:51

正需要文章收藏功能

查看完整版本: 微信小程序学习用demo：新闻，列表，详情，收藏（带解释）