【练习】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: 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"

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试