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

(三)微信小程序:焦点轮播图功能

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

  1.在news的page文件中设置页面

    目的:为了让news的page页面index登录页面达到统一的标题栏效果

    

 

     采取方案:此时添加成全局样式app.json为如图:

    

 

   2.正式设计新闻的轮播图

      1.导火线:设计轮播图需要采用API中的swiper组件,如图:

      

 

       

      2.由API中所提及的属性,设置属性值即可实现轮播功能,以下为初步代码:

<!--pages/news/news.wxml-->
<swiper indicator-dots="true" indicator-color="#109D59" 
  autoplay="true" circular="true">
  <swiper-item>
    <image class="swiperimg" src="../../image/banner1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image class="swiperimg" src="../../image/banner2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image class="swiperimg" src="../../image/banner3.jpg"></image>
  </swiper-item>
</swiper>
View Code

      ps:从代码中可以发现,属性聚集在swiper标签中,这是不符合编码规范的,因此需要在news.js中进行声明

        

 

 

      3.news.js代码定义数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
      swiperOptions:{
          indicatorDots:true,
          indicatorColor:"#109D59",
          autoplay:true,
          circular:true,
          imgUrl:[
            "../../image/banner1.jpg",
            "../../image/banner2.jpg",
            "../../image/banner3.jpg"
          ]
      }
     
  }
})
View Code

      4.news.wxml代码进行图片轮播

<!--pages/news/news.wxml-->
<swiper indicator-dots="{{ swiperOptions.indicatorDots }}"
 indicator-color="{{ swiperOptions.indicatorColor }}" 
  autoplay="{{ swiperOptions.autoplay }}" 
   circular="{{ swiperOptions.circular }}">

  <block wx:for="{{ swiperOptions.imgUrl }}" 
    wx:for-index="idx" wx:for-item="item"
    wx:key="{{ idx }}">
    <swiper-item>
      <image class="swiperimg" src="{{ item }}"></image>
    </swiper-item>
  </block>
 
</swiper>
View Code

      代码解析:1.采用<block wx:for="{{ 获取的数组 }}">标签实现遍历;

           2.wx:for-index="idx"和wx:for-item="item"声明后,才能添加wx:key="{{ idx }}"    

   3.达成效果:

      

 

 第三节轮播图功能已实现,下一节进行新闻列表渲染~

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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