微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
2017-08-11 00:00
1096 查看
摘要: 今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。
微信小程序开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程:
今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。
wxml部分:
注意:swiper-item仅可放置在swiper组件中,宽高自动设置为100%。
js部分:
js文件中定义了一个数组,里面存放图片的路径
wxss代码:
注意:轮播图组件的宽高样式需要设置在swiper标签上,官方文档中没有说明,只能一个一个试,最后的结论是必须定义在swiper标签。
上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分
先把页面内的元素标签和类名写好。
我们把数据内容单独放在一个文件夹里,模拟从网络加载的情况
如图,在根目录新建一个data文件夹,里面新建一个posts-data.js文件
别忘了在posts-data.js文件最后加上输出
然后在onLoad: 函数内设置Data的值
语法是:
wx:for=”{{数组名}}”
微信小程序开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程:
今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-color | Color | rgba(0,0,0,.3) | 指示点颜色 (这个属性目前暂未启用) |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 (这个属性目前暂未启用) |
最终的效果图:
代码部分:
下面我们来继续研究代码部分:wxml部分:
<view> <swiper indicator-dots="true" autoplay="true" interval="2000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}"></image> </swiper-item> </block> </swiper> </view>
注意:swiper-item仅可放置在swiper组件中,宽高自动设置为100%。
js部分:
data:{ imgUrls: [ '/images/wx.png', '/images/vr.png', '/images/iqiyi.png' ] },
js文件中定义了一个数组,里面存放图片的路径
wxss代码:
swiper,swiper image { width: 100%; height: 500rpx; }
注意:轮播图组件的宽高样式需要设置在swiper标签上,官方文档中没有说明,只能一个一个试,最后的结论是必须定义在swiper标签。
1、效果图预览
2、准备工作
在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局。小程序里建议使用flex布局,因为小程序对flex的支持是很好的。上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分
3、wxml部分
新闻列表部分整体使用flex纵向布局比较合适,先把页面内的元素标签和类名写好。
<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="{{item.view_img}}"></image> <text class="post-like-font">{{item.reading}}</text> <image class="post-like-image" src="{{item.collect_img}}"></image> <text class="post-like-font">{{item.collection}}</text> </view> </view>
4、wxss部分
.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; margin-bottom: 5px; font-size: 26rpx; } .post-title{ font-size: 34rpx; font-weight: 600; color: #333; margin-bottom: 10px; margin-left: 10px; } .post-image{ 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; flex-direction: row; line-height: 16px; margin-left: 10px; } .post-like-image{ width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; } .post-like-font{ vertical-align: middle; margin-right: 20px; }
5、数据绑定
数据绑定很重要,那么多的新闻列表,不可能每个新闻都复制粘贴一下代码。况且小程序还限制在1MB大小。我们把数据内容单独放在一个文件夹里,模拟从网络加载的情况
如图,在根目录新建一个data文件夹,里面新建一个posts-data.js文件
5.1、posts-data.js
在posts-data.js里定义一个local_database数组var local_database=[ { date:"Nov 10 2016", title:"文章标题1", imgSrc:"/images/post/crab.png", avatar:"/images/avatar/1.png", content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介", reading:"92", collection:"65", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", }, { date:"Nov 20 2016", title:"文章标题2", imgSrc:"/images/post/bl.png", avatar:"/images/avatar/2.png", content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介", reading:"88", collection:"66", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", }, { date:"Nov 25 2016", title:"文章标题3", imgSrc:"/images/post/cat.png", avatar:"/images/avatar/3.png", content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介", reading:"123", collection:"55", view_img:"/images/icon/chat.png", collect_img:"/images/icon/view.png", } ]
别忘了在posts-data.js文件最后加上输出
module.exports={ postList:local_database }
5.2、post.wxml使用数据绑定:
例如用户头像图片的路径,用双大括号括起来 里面和数组里定义的要相同,然后前面要加上item. 意思是绑定数组里定义的avatar,代码如下:<image class="post-author" src="{{item.avatar}}"></image>
5.3、post.js
先把posts-data.js文件引入:var postsData=require('../../data/posts-data.js')
然后在onLoad: 函数内设置Data的值
onLoad:function(options){ // 生命周期函数--监听页面加载 this.setData({ posts_key:postsData.postList }) },
6、for循环
在wxml要循环的部分外面加上<block> </block>标签
<block wx:for="{{posts_key}}" wx:for-item="item"> <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="{{item.view_img}}"></image> <text class="post-like-font">{{item.reading}}</text> <image class="post-like-image" src="{{item.collect_img}}"></image> <text class="post-like-font">{{item.collection}}</text> </view> </view> </block>
语法是:
wx:for=”{{数组名}}”
相关文章推荐
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 微信小程序开发阅读&电影小程序之(2)——阅读页面轮播图实现
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发阅读&电影小程序之(1)——欢迎页面的创建
- 微信小程序开发-新闻列表之新闻列表绑定
- 微信小程序开发(5)-新闻页面制作之banner
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- 微信小程序 绑定列表数据 分页
- 微信小程序开发(2)--之简单介绍数据绑定及渲染
- 微信小程序(应用号)开发新闻客户端的实战课程
- 微信小程序开发中数据绑定一个对象到数组中,然后取值的一个注意点
- 微信小程序--(5-1)点击列表item,把item上面显示的所有数据,传递到另外一个页面
- 足球视频小程序开发-页面数据绑定及跳转传参
- 微信小程序开发之formId使用(模板消息)、跨页面获取数据示例
- 微信小程序(应用号)开发新闻客户端的实战课程
- 微信小程序(应用号)开发新闻客户端的实战课程
- 如何在时间紧迫情况下进行机器学习:构建标记的新闻 数据 库 开发 标记 网站 阅读1629 原文:How we built Tagger News: machine learning on a