微信小程序自定義可滑動的tab切換
更新時間:2022年07月13日 14:25:19 作者:常安cc
這篇文章主要為大家詳細介紹了微信小程序自定義tab切換,可滑動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義tab切換(可滑動),供大家參考,具體內(nèi)容如下
自定義tab切換(可滑動)
<!--components/warn/warn.wxml--> <view class="menu"> ? <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator> ? <!-- <view class="order-desc">按排名升序</view> --> </view> <swiper current='{{page}}' bindchange="changepage"> ? <swiper-item wx:for="{{shouye}}" wx:key="index"> ? ? <view class="view1"> ? ? ? <view class="table"> ? ? ? ? <view class="tr"> ? ? ? ? ? <view class="th">產(chǎn)品編號</view> ? ? ? ? ? <view class="th">當前庫存</view> ? ? ? ? ? <view class="th">按時間倒序</view> ? ? ? ? </view> ? ? ? ? <block wx:for="{{saleData}}" wx:key="index"> ? ? ? ? ? <view class="tr bg-f3f4f4"> ? ? ? ? ? ? <view class="td">{{item.prodCode}}</view> ? ? ? ? ? ? <view class="td">{{item.proName}}</view> ? ? ? ? ? ? <view class="td">{{item.time}}</view> ? ? ? ? ? </view> ? ? ? ? </block> ? ? ? ? <view class="all-tabledata">查看全部</view> ? ? ? </view> ? ? </view> ? </swiper-item> </swiper>
// components/warn/warn.js Component({ ? ? /** ? ? ?* 組件的屬性列表 ? ? ?*/ ? ? properties: { ? ? }, ? ? /** ? ? ?* 組件的初始數(shù)據(jù) ? ? ?*/ ? ? data: { ? ? ? ? shouye: ['未處理', '已處理'], ? ? ? ? page: 0, ? ? ? ? saleData:[ ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? } ? ? ? ] ? ? ? }, ? ? /** ? ? ?* 組件的方法列表 ? ? ?*/ ? ? methods: { ? ? ? ? change: function (event) { ? ? ? ? ? ? var a = event.currentTarget.dataset.pageid ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? page: a ? ? ? ? ? ? }) ? ? ? ? ? }, ? ? ? ? ? changepage: function (event) { ? ? ? ? ? ? console.log(event) ? ? ? ? ? ? var a = event.detail.current ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? page: a ? ? ? ? ? ? }) ? ? ? ? ? }, ? ? } })
/* components/warn/warn.wxss */ scroll-view{ ? ? width: 100%; ? ? height: 100%; ? ? display: flex; ? } ? .menu{ ? ? /* background-color: red; ? ? display: flex; ? ? height: 60rpx; ? ? font-size: 40rpx; ? ? line-height: 70rpx; ? ? flex-direction: row; ? ? justify-content: space-around; */ ? ? width: 100%; ? ? height: 10%; ? ? background: white; ? ? display: flex; ? ? align-items: center; ? ? justify-content: space-around; ? } ? .font-white{ ? ? display: flex; ? ? flex-direction: column; ? ? align-items: center; ? ? color: #FFFFFF; ? ? background: #197FF0; ? ? font-size: 16px; ? ? font-family: PingFang SC; ? ? font-weight: 400; ? ? width: 200rpx; ? ? height: 60rpx; ? ? line-height: 60rpx; ? ? opacity: 1; ? ? border-radius: 34rpx; ? } ? .font-black{ ? ? display: flex; ? ? flex-direction: column; ? ? align-items: center; ? ? font-size: 16px; ? ? font-family: PingFang SC; ? ? font-weight: 400; ? ? color: #041320; ? ? width: 200rpx; ? ? height: 60rpx; ? ? line-height: 60rpx; ? ? background: #F6F6F6; ? ? opacity: 1; ? ? border-radius: 34rpx; ? } ? .view1{ ? ? height: 100%; ? ? overflow-y: auto; ? } ? swiper { ? ? /* width: 100%; */ ? ? height: 90%; ? ? overflow-y: auto; ? ? /* margin: 0 auto; */ ? } ? /* 表格 */ ? .tr{ ? ? width: 100%; ? display: flex; ? /* justify-content: space-around; ? ? */ } .bg-f3f4f4{ ? ? ? margin-bottom: 20rpx; ? ? background:rgba(28, 41, 53,0.05) } .tr>.th:nth-child(1),.tr>.td:nth-child(1){ ? ? width: 40%; ? ? text-align: center; } .tr>.th:nth-child(2),.tr>.td:nth-child(2){ ? ? width: 20%; ? ? text-align: center; } .tr>.th:nth-child(3),.tr>.td:nth-child(3){ ? ? width: 40%; ? ? text-align: center; } .th,.td{ ? font-size: 28rpx; ? font-family: PingFang SC; ? font-weight: 400; ? line-height:80rpx; ? color: #041320; } .all-tabledata{ ? font-size: 24rpx; ? font-family: PingFang SC; ? font-weight: 400; ? height: 40rpx; ? line-height:30rpx; ? color: #187EEF; ? text-align: center; ? margin: 40rpx 0; }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
對layui數(shù)據(jù)表格動態(tài)cols(字段)動態(tài)變化詳解
今天小編就為大家分享一篇對layui數(shù)據(jù)表格動態(tài)cols(字段)動態(tài)變化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Webpack4+Babel7+ES6兼容IE8的實現(xiàn)
這篇文章主要介紹了Webpack4+Babel7+ES6兼容IE8的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04JS控制阿拉伯數(shù)字轉(zhuǎn)為中文大寫示例代碼
阿拉伯數(shù)字如何轉(zhuǎn)為中文大寫這個實現(xiàn)的方法有很多,在本文將為大家介紹下js中時如何實現(xiàn)的,感興趣的朋友可以參考下2013-09-09分享JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件,有需要的朋友可以參考一下2013-12-12