微信小程序开发笔记（四）数据绑定

最新推荐文章于 2024-12-06 15:52:45 发布

man_zuo

最新推荐文章于 2024-12-06 15:52:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信开发文章标签：微信小程序数据绑定

本文链接：https://blog.youkuaiyun.com/man_zuo/article/details/86710732

参考教材：《微信小程序开发入门与实践》雷磊
前置知识：JavaScript，CSS

为了更好的学习后续知识，先来新建一个页面。（以下代码来自《微信小程序开发入门与实践》，下载地址：https://pan.baidu.com/s/1cxQXie，源代码和图片资源在里面都可以找到）
我们先新建一个post界面，并作为首页,用到图片资源如resource目录所示

并修改其中的post.wxml和post.wxss
post.wxml代码如下:
其中< swiper >是滑块视图容器, 这里用来实现轮播图的效果,具体用法说明请查看官方api https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<!--pages/post/post.wxml-->
<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000" circular="true">
    <swiper-item>
      <image src="../resource/post-1@text.jpg"/>
    </swiper-item>
    <swiper-item>
      <image src="../resource/post-2@text.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="../resource/post-3@text.jpg"/>
    </swiper-item>
  </swiper>
  <view class="post-container">
    <view class="post-author-date">
      <image src="../resource/my.jpg" />
      <text>2018.1.31</text>
    </view>
    <text class="post-title">小时候的冰棍儿与雪糕</text>
    <image class="post-image" src="../resource/post-4.jpg" mode="aspectFill" />