微信小程序开发02

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

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

  上一次总结写到为了使背景色完全平铺,在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

上一篇:微信开发准备(一)——Maven仓库管理新建WEB项目


下一篇:微信公众平台开发 - 微信支付(公众号支付)