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: 24rpx;
height: 17rpx;
margin-top: 16rpx;
}
.stars image{
height: 17rpx;
width: 17rpx;
margin-left: 3rpx;
}
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"