小程序模板网

微信小程序开发实战&电影小程序之(2)——阅读页面轮播图-新闻列表页面构建

发布时间:2018-04-23 11:42 所属栏目:小程序开发教程

今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。


属性名 类型 默认值 说明
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: 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23920.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询