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

原创 2018年04月14日 22:01:58

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"

关于MSSQL占用过多内存的问题

经常看见有人问,MSSQL占用了太多的内存,而且还不断的增长;或者说已经设置了使用内存,可是它没有用到那么多,这是怎么一回事儿呢?首先,我们来看看MSSQL是怎样使用内存的。最大的开销一般是用于数据缓...
  • ju_feng
  • ju_feng
  • 2003-08-18 14:13:00
  • 689

在页面的每个tab切换块里嵌套swiper轮播

在一个页面里可以同时放多个swiper轮播,但是放在tab切换里,问题就很多。 结构如下,‘main-content’是两个需要切换的tab内容块,每个'main-content'里都有一个‘swi...
  • liyuqi_liyuqi
  • liyuqi_liyuqi
  • 2016-12-09 13:30:10
  • 4487

js 移动端 tab切换栏下使用多个Swiper

引用了bootstrap的tab切换栏和Swiper相结合,需要再每个tab栏下使用一个swiper滚动,每个swiper都要经过初始化,问题就是永远只有第一个tab栏的swiper生效,第二,三个无...
  • yjwu5353
  • yjwu5353
  • 2017-04-13 19:32:38
  • 2324

tab切换swiper不生效的解决

问题是这样的: 当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得大功告成的时候,你会发现,永远只有第一个tab上的swiper生效了,其余的不管你怎么切换,swipe...
  • shilianweiyao
  • shilianweiyao
  • 2017-03-24 11:55:44
  • 702

用Swiper嵌套Tab切换时,需要注意的问题。

1、当进行切换多个swiper时,根据swiper里面内容的高度,来撑开slide的高度 2、当多个swiper切换时,有可能导致其余的swiper失效 这需要在Swiper初始化的时候加上两行初始化...
  • qq_39513971
  • qq_39513971
  • 2018-02-10 16:17:52
  • 111

利用swiper进行tab切换时,需要注意的问题。

css:.swiper-slide:{height:10px}; .swiper-slide-active:{height:auto}
  • junyu1024
  • junyu1024
  • 2017-12-07 16:52:19
  • 349

Tab选项卡下实现Swiper嵌套Swiper

在开发移动端轮播图特效首选的插件就是Swiper。近期在开发移动端项目中需要实现选项卡嵌套Swiper多tab联动实例这么一个功能,如图所示: 首先呢,要在项目的head标签内引入swiper.mi...
  • qq_39513971
  • qq_39513971
  • 2018-02-25 10:46:34
  • 164

swiper 关于h5页面无法触发A标签问题

最近在做h5页面,因为这个h5页面是应用于安卓或ios终端 发现一个问题, h5页面无法触发A标签效果,找了很久才发现原因. 下图  此处没有效果,问题是 swiper是基于移动端触摸的,...
  • u013076646
  • u013076646
  • 2017-09-15 19:59:19
  • 874

微信小程序:使用swiper与scroll-view实现tab选项卡(2)

微信小程序:使用swiper与scroll-view实现tab选项卡(2)
  • HUSHILIN001
  • HUSHILIN001
  • 2017-12-08 12:09:17
  • 1376

解决tab切换的时候,swiper不生效

解决tab切换的时候,swiper不生效
  • sunny_desmond
  • sunny_desmond
  • 2017-03-14 16:03:22
  • 3062
收藏助手
不良信息举报
您举报文章:swiper中点击后跳转详细页面,tab栏,嵌套template
举报原因:
原因补充:

(最多只允许输入30个字)