swiper中点击后跳转详细页面，tab栏，嵌套template

1.swiper中点击后跳转详细页面

1）在每个swiper-item中的image添加自定义属性data-postId，并添加函数跳转

<image src="/images/1.jpg" catchtap='onPostTap' data-postId="0"></image>

此时data-postId不能用{{item.postId}}因为，没有循环，postId有很多个不知道是哪个

要想用应该：

< swiper indicator-dots= 'true' autoplay= 'true' vertical= '{{false}}'>

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

< swiper-item >

< image src= "{{item.url}}" catchtap= 'onPostTap' data-postId= "{{item.postId}}"></ image >

</ swiper-item >

</ block >

</ swiper >

2）catchtap绑定在<swiper>上

获取postId和之前的不一样，因为此时data-postid属性不在<swiper>上

var postId=event.target.dataset.postid;   target指的是image

之前的是： var postId=event.currentTarget.dataset.postid;   currentTarget指的是swiper

2.tab栏

app.json中

"tabBar": {

"list": [

{

"pagePath": "pages/welcome/welcome",

"text": "首页"

},

{

"pagePath": "pages/post/post",

"text": "日志"

}

],

"borderStyle": "white"

}

其它属性在api中找

3.嵌套的template

1）最里面一层：在movie项目中创建stars-template项目，并创建stars-template.wxml和stars-template.wxss

< template name= "stars-template"> 定义template

< view class= "stars-container">

< view class= 'stars'>

< image src= "/images/star.png"></ image >

< image src= "/images/star.png"></ image >

< image src= "/images/star.png"></ image >

< image src= "/images/star.png"></ image >

< image src= "/images/star.png"></ image >

</ view >

< text >8.7 </ text >

</ view >

</ template >

.stars-container{

display: flex;

flex-direction: row;

}

.stars{

display: flex;

flex-direction: row;

margin-right: 24 rpx;

height: 17 rpx;

margin-top: 16 rpx;

}

.stars image{

height: 17 rpx;

width: 17 rpx;

margin-left: 3 rpx;

}

2)把stars-template嵌套进movie-picture-template

在movie项目中创建movie-picture-template项目，并创建movie-picture-template.wxml和movie-picture-template.wxss

< import src= "../stars-template/stars-template.wxml" / > 引入stars-template.wxml

< template name= "movie-picture-template">                 定义新的template

< view class= "movie-picture-container">

< image src= "/images/yourname.jpeg"></ image >

< text >你的名字 </ text >

< template is= "stars-template" / > 使用template模版

</ view >

</ template >

@import "../ stars-template/ stars-template. wxss" 引用样式

3)把 movie-picture-template 嵌套进movie-list-template

在movie项目中创建movie-list-template项目，并创建movie-list-template.wxml和movie-list-template.wxss

< import src= "../movie-picture-template/movie-picture-template.wxml" / >

< template name= "movie-list-template">

< view >

< view >

< text >正在热映 </ text >

< text >更多> </ text >

</ view >

</ view >

< template is= "movie-picture-template" / >

< template is= "movie-picture-template" / >

< template is= "movie-picture-template" / >

</ template >

@import "../ movie-picture-template/ movie-picture-template. wxss"

4)最后在movie项目中引入模版 movie-list-template

< import src= "movie-list-template/movie-list-template.wxml" / >

< view >

< template is= "movie-list-template" / >

< template is= "movie-list-template" / >

< template is= "movie-list-template" / >

</ view >

@import " movie-list-template/ movie-list-template. wxss"