微信小程序實現tab點擊切換

3403771864 發布于2022-09-21 22:35 / 541人閱讀

微信小程序項目中，要實現無滑動效果，可以用tab點擊切換，看看具體代碼供參考：

　　<!--pages/dingdan/dingdan.wxml-->
　　<view class="body">
　　<view class="swiper-tab">
　　<view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
　　<hr class="{{page==index?'selected-line':'unselect-line'}}" />
　　</view>
　　</view>
　　<view class="view-Content">
　　<view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
　　<view class="content">
　　<text>暫無訂單{{index}}</text>
　　</view>
　　</view>
　　</view>
　　</view>

　　/* pages/dingdan/dingdan.wxss */
　　page {
　　width: 100%;
　　height: 100%;
　　overflow: hidden;
　　/* background: pink; */
　　}
　　.body {
　　height: 100%;
　　/* background: hotpink; */
　　display: flex;
　　flex-direction: column;
　　}
　　/* tab欄 */
　　.swiper-tab {
　　width: 100%;
　　height: 80rpx;
　　text-align: center;
　　display: flex;
　　justify-content: space-between;
　　background: white;
　　}
　　.selected-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　color: #ff5050;
　　background: #fff;
　　font-size: 32rpx;
　　font-weight: bold;
　　font-family: PingFang SC;
　　font-weight: 400;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　opacity: 1;
　　/* border-bottom: 2px solid #ff5050; */
　　position: relative;
　　}
　　.unselect-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　font-size: 16px;
　　font-family: PingFang SC;
　　font-weight: 400;
　　color: #4f4f50;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　background: #fff;
　　opacity: 1;
　　position: relative;
　　/* border-radius: 34rpx; */
　　}
　　.selected-line {
　　background: #ff5050;
　　height: 4rpx;
　　width: 90rpx;
　　position: absolute;
　　/* margin-top: 10rpx; */
　　bottom: -18rpx;
　　width: 60rpx;
　　}
　　/* 內容 */
　　.view-Content {
　　flex: 1;
　　overflow-y: auto;
　　background-color: rgb(236, 236, 236);
　　}
　　.tabCon {
　　height: 100%;
　　}
　　/* 展示隱藏 */
　　.show {
　　display: block;
　　}
　　.hidden {
　　display: none;
　　}

　　Page({
　　/**
　　* 頁面的初始數據
　　*/
　　data: {
　　page: 0, // page：當前頁--
　　tabList: [{
　　title: '菜單1',
　　num: 0
　　}, {
　　title: '菜單2',
　　num: 0
　　}, {
　　title: '菜單3',
　　num: 0
　　}],
　　},
　　// 切換tab
　　change: function (event) {
　　console.log('切換時會調用', event);
　　var a = event.currentTarget.dataset.pageid
　　this.setData({
　　page: a,
　　})
　　},
　　/**
　　* 生命周期函數--監聽頁面加載
　　*/
　　onLoad: function (options) {
　　},
　　/**
　　* 生命周期函數--監聽頁面初次渲染完成
　　*/
　　onReady: function () {
　　},
　　/**
　　* 生命周期函數--監聽頁面顯示
　　*/
　　onShow: function () {
　　},
　　/**
　　* 生命周期函數--監聽頁面隱藏
　　*/
　　onHide: function () {
　　},
　　/**
　　* 生命周期函數--監聽頁面卸載
　　*/
　　onUnload: function () {
　　},
　　/**
　　* 頁面相關事件處理函數--監聽用戶下拉動作
　　*/
　　onPullDownRefresh: function () {
　　},
　　/**
　　* 頁面上拉觸底事件的處理函數
　　*/
　　onReachBottom: function () {
　　},
　　/**
　　* 用戶點擊右上角分享
　　*/
　　onShareAppMessage: function () {
　　},
　　})

感謝閱讀，請關注更多后續精彩內容。

GPU云服務器云服務器微信小程序技術實現 js實現tab切換微信小程序微信小程序支付

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127810.html

微信小程序之選項卡

摘要：我們在函數中通過獲取設備的寬高來設置組件高度以及高度為導航欄的高度點擊導航欄切換內容點擊切換滑動內容切換導航欄滑動切換可滾動區域滾動最底刷新數據頁面上拉觸底事件的處理函數更新列表一個漂亮的選項卡就完成了完整案例選項卡隨處可見，微信小程序中也不例外，下面來寫一個簡單的小程序選項卡思路之前寫過基于swiper的選項卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件...

stormjun 2019-08-23 11:49 評論0 收藏0
微信小程序小技巧系列《一》幻燈片，tab導航切換

摘要：作者來自幻燈片使用微信小程序原生組件實現。配合在邏輯頁面配置數據實現幻燈片導航切換由于微信小程序不能直接操作，所以這里設置一個值。用來模擬操作，來實現導航內容的切換用于模擬操作轉自轉載地址作者：gou-tian來自：github 幻燈片使用微信小程序原生組件swiper實現。 ...

rickchen 2019-08-21 11:16 評論0 收藏0
微信小程序小技巧系列《一》幻燈片，tab導航切換

摘要：作者來自幻燈片使用微信小程序原生組件實現。配合在邏輯頁面配置數據實現幻燈片導航切換由于微信小程序不能直接操作，所以這里設置一個值。用來模擬操作，來實現導航內容的切換用于模擬操作轉自轉載地址作者：gou-tian來自：github 幻燈片使用微信小程序原生組件swiper實現。 ...

MangoGoing 2019-08-14 17:00 評論0 收藏0
實現微信小程序下面商品左右滑動上面tab也跟隨變動功能

　　現在就是要求在小程序下面商品左右滑動上面tab也跟隨變動功能　　點擊tab切換下面的上面信息，商品左右滑動切換上面的tab分類　　功能描述：點擊tab切換下面的商品信息；滑動下面的商品信息tab也進行切換。　　第一步：我們先來說一下上面的tab,tab我們使用scroll-view scroll-x="true" 就可以。　　<scroll-viewclass=&qu...

3403771864 2022-11-05 17:23 評論0 收藏0