推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
微信小程序开发实战电影小程序之（2）——阅读页面轮播图-新闻列表页面构建
发布时间:2020-11-13今天打开微信官方文档发现轮播图组件更新了两个功能，但是目前暂未启用，估计过几天就能使用了。
属性名 类型 默认值 说明indicator-color Color rgba(0,0,0,.3) 指示点颜色 （这个属性目前暂未启用）
indicator-active-color Color #000000 当前选中的指示点颜色 （这个属性目前暂未启用）
最终的效果图：
下面我们来继续研究代码部分：
wxml部分：
注意：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、效果图预览
在拿到效果图后不要先急着去写代码，而是要去分析一下页面的整体结构，用什么方式定位和布局。小程序里建议使用flex布局，因为小程序对flex的支持是很好的。
上一篇博客中完成了轮播图部分，接下来继续完成下面的新闻列表部分
3、wxml部分新闻列表部分整体使用flex纵向布局比较合适， 先把页面内的元素标签和类名写好。
<view class="post-container"> <view class="post-author-date"> <image class="post-author" src=http://www.yiyongtong.com/archives/"{{item.avatar}}"></image> <text class="post-date">{{item.date}}</text> </view> <text class="post-title">{{item.title}}</text> <image class="post-image" src=http://www.yiyongtong.com/archives/"{{item.imgSrc}}"></image> <text class="post-content">{{item.content}}</text> <view class="post-like"> <image class="post-like-image" src=http://www.yiyongtong.com/archives/"{{item.view_img}}"></image> <text class="post-like-font">{{item.reading}}</text> <image class="post-like-image" src=http://www.yiyongtong.com/archives/"{{item.collect_img}}"></image> <text class="post-like-font">{{item.collection}}</text> </view> </view>4、wxss部分 .post-container{ display: flex; flex-direction:
