這篇文章帶給大家的內容是關於微信小程式實現一個簡單的Tab可滑動的切換方式(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
最近一直在做小程式項目,對於不同需求來說真是煩不勝煩,之前做的訂單頁來說只需要可點擊切換就可以,但是在後期的迭代中提到要求可滑動切換,下面我自己整理了一套比較簡單暴力的滑動切換方式,與大家分享一下,下面有效果圖。 (菜鳥上路,不喜勿噴):
.wxml
<!--pages/mine/order/order.wxml--> <view class='order'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">代付款</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">代发货</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收货</view> <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">待评价</view> <view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">退款/售后</view> </view> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item> <view>代付款</view> </swiper-item> <swiper-item> <view>代发货</view> </swiper-item> <swiper-item> <view>待收货</view> </swiper-item> <swiper-item> <view>待评价</view> </swiper-item> <swiper-item> <view>退款/售后</view> </swiper-item> </swiper> </view>
.wxss
/* pages/mine/order/order.wxss */ .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; display: flex; flex-flow: row; justify-content: space-between; } .swiper-tab-item { width: 30%; color: #434343; font-size: 28rpx; } .active { color: #f65959; border-bottom: 4rpx solid #f65959; } swiper { text-align: center; background-color: #fff }
#.js
// pages/mine/order/order.js Page({ /** * 页面的初始数据 */ data: { currentTab: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //滑动切换 swiperTab: function (e) { this.setData({ currentTab: e.detail.current }); }, //点击切换 clickTab: function (e) { if (this.data.currentTab === e.target.dataset.current) { return false; } else { this.setData({ currentTab: e.target.dataset.current }) } } })
效果圖:
#在wxml部分其實可以用wx:for 來做。
相關推薦:
微信小程式實例:輪播圖的程式碼實作與分析
以上是微信小程式實作一個簡單的Tab可滑動的切換方式(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
刺客信條陰影:貝殼謎語解決方案
4 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
4 週前ByDDD
<🎜>:死鐵路 - 如何完成所有挑戰
1 個月前ByDDD
Atomfall指南:項目位置,任務指南和技巧
1 個月前ByDDD

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境