组件:基础滑动,带小点
<swipe indicator-dots="true"r>
<swiper-item>content</swiper-item>
<swiper-item>content</swiper-item>
<swiper-item>content</swiper-item>
</swiper>
2、页面跳转
<view class="moto-container" bindtap='onTap'>
<text class="moto">开启小程序之旅</text><!-- catchtap='onTextTap'阻止冒泡-->
</view>
Page({
onTap:function(event){
//从一个页面跳转到另一个页面,最多跳5级 父级被隐藏执行onHide
// wx.navigateTo({
// url : "../posts/post"
// });
// 父级被关闭 执行onUnload
// 关闭当前页面,跳转到应用内的某个页面
wx.redirectTo({
url:"../posts/post"
});
// wx.navigateTo({
// url: 'String',//页面跳转地址
// wuccess:function(res){
// //success //跳转成功执行函数
// },
// fail:function(){
// //fail //跳转失败执行函数
// },
// complete:function(){
// //complete //跳转成功失败都执行函数
// }
// })
// console.log('onTap');
},
onTextTap:function(event){
console.log('onTextTap');
},
onUnload:function(){
// console.log('welcome page os load');
},
onHide:function(){
// console.log('welcome page os hide');
}
});
alt + shift + f 快速格式化代码样式
3标签
<view>
<text>
<image>
<block>
<templade>
4循环
<block wx:for="{{postsData}}" wx:for-item="item">
<view>
<text>{{item.title}}</text>
</view>
<view>
<image class="img2" src="{{item.imgSrc}}"></image>
</view>
5引入其它页面js
var postsData = require('../data/posts-data.js');
Page({
data:{
//小程序总是会读取data对象来做数据绑定,这个动作我们称为动作A
//而这个动作A的执行,是在onLoad事件执行后发生的
},
onLoad: function() {
this.data.postList = postsData.postList
// this.setData({
// posts_key: postsData.postList
// });
}
})
6
引入css模板
@import "../post-item/post-item-template.wxss";
<!--模板-->
<template name="postItem">
</template>
引入wxml文件
<import src="../post-item/post-item-template.wxml" />
<template is="postItem" data="{{item}}" />
//导入js
var postsData = require('../data/posts-data.js');