• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序学习之for循环

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、使用自定义创建的json数据

1. 创建微信小程序项目后

在wxml文件中增加for循环

<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
    <view class="post-container">
      <view class="post-author-date">
       <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
     </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
       <image class="post-like-image" src="../../images/icon/chat.png"></image>
        <text class="post-like-font">{{item.collection}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{item.reading}}</text>
      </view>
   </view>
  </block>

  

posts_key的定义在js文件中
 onLoad: function (options) {
      //页面初始化 options为页面跳转所带来的参数
      var posts_content = [
        {
          date: "Sep 18 2017",
          title: "飞蟹1",
          imgSrc:"/images/post/crab.png",
          avatar:"/images/avatar/1.png",
          content:"现在的飞蟹正好吃。。。。。。",
           reading:"112",
          collection:"96",
        },
        {
          date: "Sep 18 2017",
          title: "飞蟹2",
          imgSrc: "/images/post/bl.png",
          avatar: "/images/avatar/2.png",
          content: "现在的飞蟹正好吃。。。。。。",
          reading: "112",
          collection: "96",
        }
        
      ]

      this.setData({
        posts_key: posts_content
      })
  },

  

对应的wxss文件

swiper{
  width: 100%;
  height:600rpx;
}

swiper image{
  width:100%;
  height:600rpx;

}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}

.post-author-date{
 margin:10rpx 0 20rpx 10rpx;
}

.post-author{
  width:60rpx;
  height: 60rpx;
  vertical-align: middle;
}

.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  font-size: 26rpx;
}
    

.post-title{
   font-size:34rpx;
   font-weight: 600;
   color: #333;
   margin-bottom: 10px;
   margin-left:10px;
}

.post-image{
  margin-left: 16px;
  width:100%;
  height:340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}

.post-content{
  color:#666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left:20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  font-size: 13px;
  display: flex;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}

.post-like-image{
  height: 16px;
  width: 16px;
  margin-left: 8px;
  vertical-align: middle;
}

.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

  

 

二、将数据改成到js文件中

创建data/posts-data.js文件

var posts_content = [
  {
    date: "Sep 18 2017",
    title: "飞蟹1",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "现在的飞蟹正好吃。。。。。。",
    reading: "112",
    collection: "96",
  },
  {
    date: "Sep 18 2017",
    title: "飞蟹2",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "现在的飞蟹正好吃。。。。。。",
    reading: "112",
    collection: "96",
  }

]

var name = "zhangsan"

module.exports = {
  postList:posts_content,
  exportName:name
}

  

在posts.js中引用posts-data.js文件

 在onLoad函数里, 将data.posts_keys 赋值为postsData.postList

  onLoad: function (options) {
    this.data.posts_key = postsData.postList;

  },

最终效果是一致的。

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap