swiper组件和数据绑定

2018年1月5日23:40:18

一、swiper组件

微信小程序框架自带的类似于图片轮播的组件，swiper组件可以接受图片、容器、文本等等的切换，十分方便。

<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="500">
    <swiper-item>
      <image src="/images/wx.png" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/vr.png" class="slide-image"/>
    </swiper-item>
  </swiper>

二、数据绑定

<view class='contant_list'>
    <view class='user_icon'>
      <image src='{{avatar}}'></image>
      <text>{{time}}</text>
    </view>
    <text class='D-title'>{{title}}</text>
    <image class='CL-img' src='{{img}}'></image>
    <text class='jianjiie'>{{jianjie}}</text>
    <view class='ChaKannum'>
      <image src='/images/icon/view.png'></image>
      <text>{{view}}</text>
      <image src='/images/icon/chat1.png'></image>
      <text>{{char}}</text>
    </view>
  </view>

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    time:"2018年1月5日17:04:30",
    title:"这里是标题",
    jianjie:"因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。",
    img:"/images/post/bl.png",
    avatar:"/images/avatar/5.png",
    view:"544",
    char:"42"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  }
})

三、图片资源

在微信编辑器里面不可以直接到文件夹内粘贴图片资源文件，必须到磁盘内把文件资源拷贝到相应的文件夹里面在进行处理。感觉好不方便。

四、修改标题栏

在json文件中加入

{
  "navigationBarTitleText": "文与字"   //标题栏
}