資訊專(zhuān)欄INFORMATION COLUMN
現(xiàn)在就是要求在小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能
點(diǎn)擊tab切換下面的上面信息，商品左右滑動(dòng)切換上面的tab分類(lèi)
功能描述：點(diǎn)擊tab切換下面的商品信息；滑動(dòng)下面的商品信息tab也進(jìn)行切換。
第一步：我們先來(lái)說(shuō)一下上面的tab,tab我們使用scroll-view scroll-x="true" 就可以。
<scroll-view class="cates" scroll-x="true" scroll-with-animation="true" >
<block wx:for="{{cates}}" wx:key="index">
<view class="{{item.id === currentId?'cate-item-act cate-item':'cate-item'}}" data-id="{{item.id}}" bindtap="cateChange">{{item.name}}</view>
</block>
</scroll-view>
/* 分類(lèi) */
.cates {
position: fixed;
z-index: 100;
top: 0;
white-space: nowrap;
width: 100%;
padding: 20rpx 30rpx;
box-sizing: border-box;
font-family: Hiragino Sans GB;
background-color: #fff;
border-top: 1rpx solid #eee;
}
.cates .cate-item {
display: inline-block;
padding: 10rpx 20rpx;
font-size: 26rpx;
margin-right: 20rpx;
color: #767A84;
}
.cates .cate-item:last-child{
margin-right: 0rpx;
}
.cates .cate-item-act {
background: #3293FF;
color: #fff;
border-radius: 48rpx;
}第二步：接著就是下面的商品部分，我們可以使用swiper +scroll-view 來(lái)完成。
<view class="content">
<swiper class="cont-swiper" bindchange="swiperSwitchTab" style="height: 600px;">
<block wx:key="index" wx:for="{{cates}}">
<swiper-item class="cont-swiper-item" data-id="{{item.id}}" style="height:100%" wx:key="*this">
<!-- 每個(gè)tab對(duì)應(yīng)的商品 -->
<scroll-view scroll-y="true" style="height: 600px;" bindscroll="contenScrollY" scroll-with-animation="true">
<block wx:for="{{serviceList}}" wx:key="index">
<view class="con-item">{{item.name}}</view>
</block>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view> /* 內(nèi)容 */
.content {
width: 100%;
height: 100%;
padding: 130rpx 0rpx;
box-sizing: border-box;
}
.content .cont-swiper {
padding: 0 30rpx;
}
.content .con-item {
width: 100%;
height: 200rpx;
background-color: rgb(180, 140, 221);
margin-top: 30rpx;
border-radius: 20rpx;
line-height: 200rpx;
text-align: center;
}需要注意的問(wèn)題：
1 swiper 本身是有高度的，不會(huì)因?yàn)閮?nèi)部元素?fù)伍_(kāi)。
2 scroll-view scroll-y="true" 是需要給scroll設(shè)置高度。所以代碼中標(biāo)明的橘色是為了說(shuō)明這個(gè)問(wèn)題
swiperSwitchTab(e){
// e.detail.current tab的index
console.log('左右滑動(dòng)下面商品',e.detail.current)
this.setData({
currentId: this.data.cates[e.detail.current].id
})
// 根據(jù)id去調(diào)用接口，替換listData數(shù)據(jù) this.getData();}詳細(xì)代碼已經(jīng)說(shuō)完，趕快動(dòng)手操作吧！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/128259.html
摘要：微信小程序小米事先聲明，這是一個(gè)高仿小米的微信小程序。寫(xiě)完之后查文檔才發(fā)現(xiàn)，微信小程序官方提供了自定義組件的方法有需要的可以查看微信小程序文檔寫(xiě)完這個(gè)組件后我總解了一下需要注意的問(wèn)題選中了的當(dāng)前頁(yè)面，再次點(diǎn)擊因該無(wú)效。 微信小程序-小米Lite 事先聲明，這是一個(gè)高仿小米Lite的微信小程序。 我呢現(xiàn)在是一個(gè)大三快大四的學(xué)生，這個(gè)小程序花了我很長(zhǎng)時(shí)間，把能寫(xiě)的功能基本上都寫(xiě)了。我秉著分...
摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁(yè)以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁(yè)，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。放下效果圖微信小程序購(gòu)物車(chē)購(gòu)物車(chē)頁(yè)面邏輯的話(huà)，要按業(yè)務(wù)需求來(lái)。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開(kāi)發(fā)小程序變的越來(lái)越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問(wèn)題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫(xiě)的不足的地方，請(qǐng)各...
摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開(kāi)發(fā)技巧，方便查找。但是第一，微信小程序是國(guó)內(nèi)的，有中文文檔，雖然它的文檔說(shuō)明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來(lái)說(shuō)不是問(wèn)題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺(jué)得本文還不錯(cuò)，記得給個(gè)...
摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開(kāi)發(fā)技巧，方便查找。但是第一，微信小程序是國(guó)內(nèi)的，有中文文檔，雖然它的文檔說(shuō)明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來(lái)說(shuō)不是問(wèn)題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺(jué)得本文還不錯(cuò)，記得給個(gè)...
閱讀 687·2023-03-27 18:33
閱讀 889·2023-03-26 17:27
閱讀 755·2023-03-26 17:14
閱讀 738·2023-03-17 21:13
閱讀 667·2023-03-17 08:28
閱讀 2092·2023-02-27 22:32
閱讀 1521·2023-02-27 22:27
閱讀 2432·2023-01-20 08:28
