微信小程序开发笔记(四)数据绑定

参考教材:《微信小程序开发入门与实践》 雷磊
前置知识: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" />
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值