小程序学习笔记(二）

小程序学习笔记(二）

swiper轮播图组件，swiper-item是承载里面具体内容组件的容器，swiper-item的宽高决定于父控件的swiper的宽高

swiper组建vertical纵向滚动属性，默认是横向

swiper 轮播滚动，可设置垂直滚动 在swiper 中设置vertical="true"

 

单向数据绑定：数据从脚本文件向wxml文件传递时，可在js中直接创建数据变量并赋值，在wxml中通过双花括号语法写入该变量进行数据绑定。

 

小程序的数据绑定使用{{ }}，从服务器里拿数据放在onload函数里，并且加上一句话：this.setDate(接收服务器数据的变量名)，这样相当于将数据写入了data中，然后只需要将对应的数据变量用{{ }}绑定到wxml文件中相应位置即可

data:{

  },

 onLoad:function(options){

   // 生命周期函数--监听页面加载

   var post_content1={

       date:"Sep 18 2016",

       title:"正是虾蟹肥状时期",

       post_img:"/images/post/crab.png",

       content:"虾蟹是节肢动物的另一家族，同属于甲壳纲的十足目。这类动物与人类有着十分密切的关系，有些是主要的水产养殖或捕捞对象，其中尤以虾、龙虾和蟹等，在我国海洋渔业捕获研究，目前已发现的约有1000多种，其中虾类400多种，蟹类600多种。",

       view_num:"112",

       collect_num:"60",

       author_img:"/images/avatar/1.png"

    }

   this.setData(post_content1);

  },

wx:if="{{}}"显示和隐藏

隐藏：<image wx:if="{{false}}"class="post-like-image" src="/images/icon/chat.png"></image>

显示：

 

列表渲染:wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}"wx:for-index="idx" wx:for-item="itemName">

 {{idx}}: {{itemName.message}}

</view>

block wx:for:

类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

 

<block wx:for="{{[1, 2,3]}}">

 <view> {{index}}: </view>

 <view> {{item}} </view>

</block>

 

<block wx:for="{{post_key}}"wx:for-item="item">

   <view class="post-container">

       <view class="post-author-date">

           <image class="post-author"src="{{item.author_img}}"></image>

           <text class="post-date">{{item.date}}</text>

       </view>

       <text class="post-title">{{item.title}}</text>

       <image class="post-image"src="{{item.post_img}}"></image>

       <text class="post-content">{{item.content}}</text>

       <view class="post-like">

           <image class="post-like-image"src="/images/icon/chat.png"></image>

            <textclass="post-like-font">{{item.view_num}}</text>

           <image class="post-like-image"src="/images/icon/view.png"></image>

           <textclass="post-like-font">{{item.collect_num}}</text>

       </view>

   </view>

</block>

js：

var post_content=[

    {

        date:"Sep 18 2016",

       title:"正是虾蟹肥状时期",

       post_img:"/images/post/crab.png",

       content:"虾蟹是节肢动物的另一家族，同属于甲壳纲的十足目。这类动物与人类有着十分密切的关系，有些是主要的水产养殖或捕捞对象，其中尤以虾、龙虾和蟹等，在我国海洋渔业捕获研究，目前已发现的约有1000多种，其中虾类400多种，蟹类600多种。",

       view_num:"112",

       collect_num:"60",

       author_img:"/images/avatar/1.png",

   },

    {

        date:"Sep 18 2015",

       title:"正是虾蟹肥状时期",

       post_img:"/images/post/vr.png",

       content:"虾蟹是节肢动物的另一家族，同属于甲壳纲的十足目。这类动物与人类有着十分密切的关系，有些是主要的水产养殖或捕捞对象，其中尤以虾、龙虾和蟹等，在我国海洋渔业捕获研究，目前已发现的约有1000多种，其中虾类400多种，蟹类600多种2。",

       view_num:"62",

       collect_num:"88",

       author_img:"/images/avatar/2.png",

    }

]

this.setData({

   post_key:post_content

});

 

点击事件用tap，在使用的时候需要加“bind”，如bindtap，或者加“catch”，如“catchtap”; bindtap="ontap"，就表示点击的时候调用“ontap”方法； <text class="goBtn"bindtap="ontap">开启小程序之旅</text>

wx.navigateTo隐藏当前页面，跳转到下一页（从父页面跳转到子页面，子页面最多5级） wx.redirectTo 关闭当前页面，跳转到下一个页面（俩个页面是平级的）

Page({

 ontap:function(){

     wx.navigateTo({

          url:"../posts/posts"

     })

   // wx.redirectTo({

   //   url:"../posts/posts"

   // })

  }

})

 

通过<importsrc=""/>的方式引入template.wxmlsrc的路径既可以是绝对路径也可以是相对路径通过@import""的方式引入template.wxss 路径既可以是绝对路径也可以是相对路径 <block wx;for="{{list}}"wx:for-item="item"> <template is="name"data="item"> </block> 中template is="name" 必须与template.wxml文件中的template标签的name一致 data中的item必须与wx:for-item中的item一致

<block wx:for="{{post_key}}"wx:for-item="item" wx:for-index="idx">

       <!--//template-->

       <view catchtap="onPostTap"data-postId="{{item.postId}}">

            <template is="postItem" data="{{item}}"/>

       </view>

   </block>

<template name="postItem">

   <view class="post-container">

       <view class="post-author-date">

           <image class="post-author"src="{{item.avatar}}"></image>

           <text class="post-date">{{item.date}}</text>

       </view>

       <text class="post-title">{{item.title}}</text>

       <image class="post-image" src="{{item.imgSrc}}"></image>

       <text class="post-content">{{item.content}}</text>

       <view class="post-like">

           <image class="post-like-image"src="/images/icon/chat.png"></image>

           <textclass="post-like-font">{{item.reading}}</text>

            <imageclass="post-like-image"src="/images/icon/view.png"></image>

           <textclass="post-like-font">{{item.collection}}</text>

       </view>

   </view>

</template>

 

<templateis="postItemTemplate" data="{{...item}}，“...item”相当于把数据源里面的数据平铺了

<block wx:for="{{post_key}}"wx:for-item="item" wx:for-index="idx">

   <!--//template-->

    <view catchtap="onPostTap"data-postId="{{item.postId}}">

          <templateis="postItem" data="{{...item}}"/>

    </view>

</block>

不能在template 上直接监听事件，需要在 template 外加一层 view 上进行事件监听