最终的效果图:
代码部分:
下面我们来继续研究代码部分: <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、准备工作
上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分 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: |
微信小程序开发实战&电影小程序之(2)——阅读页面轮播图-新闻列表页面构建
发布:2018-04-23 11:42浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08