微信小程序开发02

Posted 2020-10-26 Someday&Li

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

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

　　上一次总结写到为了使背景色完全平铺，在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文件中通过“”{{}}”对绑定数据进行访问。但是具体实现还未完成，敬请期待后文的讲解。