码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发02

时间:2018-03-07 00:49:42      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:int   cat   思想   实现   容器   添加   tor   新闻列表   列表   

今天完成小程序的内容展示页,通过不断地尝试学会了新闻列表展示页样式的简单设置,以及数据绑定的相关知识,但并未来得及实现其功能。

一、样式设置相关知识总结:

  上一次总结写到为了使背景色完全平铺,在app.wxss中设置page{}的背景色,这种做法欠妥。会影响后期其他页面内容展示,因此将第一次总结中的page背景色增添到启动页的wxss文件中。

  本次设计学会使用了swiper组件,为后面使用templete模板打下铺垫。

  使用以下代码作为讲解:

<view>
    <swiper indicator-dots="true" autoplay="true" inteval="5000"> 
        <swiper-item >
            <image src="/image/NEW/begin.jpg"></image>
        </swiper-item> 
        <swiper-item>
            <image src="/image/NEW/culture.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/image/NEW/love.jpg"></image>
        </swiper-item>

    </swiper>
</view>

  (1)<view>作为<swiper>组件的容器,其中含有三项<swiper-item>。其中注意的是,item中的属性设置应在swiper组件中设置,否则将无效,另外对于item包含的图片需要在<image>标签中另外再标明属性。

  (2)indicator-dots是图片下方的小圆点,默认值为TRUE。

二、数据绑定

  微信小程序大量使用了“数据绑定”的思想,在学习过程中,逐渐明白这对于内容的更新极为方便。只需要添加新内容即可进行更新。在脚本文件(.js)中对data{}进行设置即可,可通过post-content[]数组对内容进行编号设置,在wxml文件中通过“”{{}}”对绑定数据进行访问。但是具体实现还未完成,敬请期待后文的讲解。

微信小程序开发02

标签:int   cat   思想   实现   容器   添加   tor   新闻列表   列表   

原文地址:https://www.cnblogs.com/somedayLi/p/8519667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!