我的活動日程小程式頁面（導航切換）
阿新 • • 發佈：2018-11-14
1.wxml程式碼如下
<!--導航切換 --> <view class='top-bg'> <view class="swiper-tab"> <view class="swiper-tab-list {{current == index ? 'change': ' '}}" wx:for="{{title}}" data-index="{{index}}" bindtap='change'>{{item}} </view> </view> </view> <swiper current="{{current}}" bindchange='swiperChange' duration="300" style="height:{{winHeight}}px"> <swiper-item wx:for="{{order}}"> <!-- 切換內容s --> <scroll-view class='scroll-view' scroll-y="true" style="height:{{winHeight-50}}px"> <view class='tab-nav'> <view class='time'>上午</view> <view class='tab-style'> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>9:00</view> <view class='time1'>﹀</view> <view class='time1'>11:30</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>9:00</view> <view class='time1'>﹀</view> <view class='time1'>11:30</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> </view> </view> <view class='tab-nav'> <view class='time'>下午</view> <view class='tab-style'> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>13:00</view> <view class='time1'>﹀</view> <view class='time1'>15:00</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>16:00</view> <view class='time1'>﹀</view> <view class='time1'>18:00</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> </view> </view> <view class='tab-nav'> <view class='time'>晚上</view> <view class='tab-style'> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>13:00</view> <view class='time1'>﹀</view> <view class='time1'>15:00</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> <view class='tab-con'> <view class='tab-con-time'> <view class='time1'>16:00</view> <view class='time1'>﹀</view> <view class='time1'>18:00</view> </view> <view class='tab-con-detailed'> <view class='tab-con-text'>培訓：XXXXXXXXXXXXX</view> <view class='tab-con-text'>機構：XXXXXXXXXXXXX</view> <view class='tab-con-text'>地點：XXXXXXXXXXXXX</view> </view> </view> </view> </view> </scroll-view> <!-- 切換內容e --> </swiper-item> </swiper>
2.wxss程式碼如下
page{ background: #f2f2f2; } /* -----導航切換s -----*/ .top-bg { background-color: #3891f8; position:fixed; top:0; width: 100%; z-index: 999; } .swiper-tab { display: flex; text-align: center; color: #fff; font-size: 12px; width: 95%; height: 80rpx; line-height: 80rpx; margin: 0 auto; } .swiper-tab-list { flex: 1; } .change { background: #f2f2f2; color: rgb(51, 51, 51); } /* -----導航切換e -----*/ /* 切換內容s */ .scroll-view{ margin-top: 100rpx; } .tab-nav{ width: 95%; margin: 0 auto; } .tab-style{ border-radius: 5px; background: #fff; } .time{ text-align: center; font-size: 14px; } .tab-con{ display: flex; padding: 5px 0px; border-top: 1px solid #f2f2f2; } .tab-con-time{ width: 200rpx; font-size: 14px; } .tab-con-time .time1{ text-align: center; } .tab-con-detailed{ } .tab-con-text{ font-size: 14px; } /* 切換內容e */
3.js如下
var app = getApp(); Page({ /** * 頁面的初始資料 */ data: { BaseURL: app.globalData.BaseURL, //圖片後臺 title: ["今", "一", "二", "三", "四", "五", "六"], current: 0, index: 0, id: 0, order: [1, 2, 3, 4,5,6,7] }, change: function (e) { this.setData({ current: e.currentTarget.dataset.index, }) }, swiperChange(e) { let current = e.detail.current; this.setData({ current: current, }) console.log(current) }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var that = this; // 獲取系統資訊 wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
4.效果圖如下
