123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <template>
- <view class="myShopTour-wrap">
- <!-- 自定义标题 -->
- <u-navbar :is-back="false" :border-bottom="false" :background="background" id="navbar">
- <view class="slot-wrap">
- <view class="back-icon" @click="goBack">
- <u-icon name="arrow-left" color="#fff" size="32"></u-icon>
- </view>
- <view class="left-icon">我的巡店</view>
- <view class="right-icon">
- <u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
- </view>
- </view>
- </u-navbar>
- <!-- 内容 -->
- <view class="myShopTour-con">
- <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
- <swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
- <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
- <scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
- <view class="record-con">
- <view class="record-item">
- <view class="item-head"></view>
- </view>
- </view>
- <u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
- <u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
- </scroll-view>
- </swiper-item>
- </swiper>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- background: {
- // 渐变色
- backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
- },
- tabList: [ // tab切换 类型
- { dispName: '全部', code:'' },
- { dispName: '进行中', code:'1' },
- { dispName: '已完成', code:'2' },
- { dispName: '已过期', code:'3' }
- ],
- current: 0, // tabs组件的current值,表示当前活动的tab选项
- swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
- pageNo: 1, // 当前页码
- pageSize: 15, // 一页多少条
- total: 0, // 总条数
- // status: 'loading', // 加载状态
- status: 'loadmore', // 加载状态
- noDataText: '暂无数据', // 列表数据为空时提示文字
- list: [], // 数据列表
- }
- },
- onLoad() {
- this.pageInit()
- },
- methods: {
- // 返回
- goBack() {
- uni.navigateBack({
- delta: 1
- });
- },
- pageInit(){
- this.total = 0
- this.pageNo = 1
- },
- // tabs通知swiper切换
- tabsChange(index) {
- this.swiperCurrent = index
- this.list = []
- this.status = "loading"
- },
- swiperChange(event){
- this.list = []
- this.status = "loading"
- },
- // swiper-item左右移动,通知tabs的滑块跟随移动
- transition(e) {
- let dx = e.detail.dx;
- this.$refs.uTabs.setDx(dx);
- },
- // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
- // swiper滑动结束,分别设置tabs和swiper的状态
- animationfinish(e) {
- let current = e.detail.current
- if(current != this.current){
- this.$refs.uTabs.setFinishCurrent(current)
- this.swiperCurrent = current
- this.current = current
- this.pageInit()
- }
- },
- // scroll-view到底部加载更多
- onreachBottom() {
- if(this.list.length < this.total){
- this.pageNo += 1
- this.pageInit()
- }else{
- this.status = "nomore"
- }
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #f8f8f8;
- height: calc(100vh - 44px);
- }
- .myShopTour-wrap {
- height: 100%;
- /* 自定义导航栏样式 */
- .slot-wrap {
- display: flex;
- align-items: center;
- /* 如果您想让slot内容占满整个导航栏的宽度 */
- flex: 1;
- /* 如果您想让slot内容与导航栏左右有空隙 */
- padding: 0 30rpx;
- color: #fff;
- font-size: 28upx;
- .left-icon {
- flex-grow: 1;
- font-size: 32upx;
- margin-right: 10upx;
- text-align: center;
- }
- .right-icon {
- padding-left: 50upx;
- }
- .uni-icons {
- margin-right: 10upx;
- }
- }
- // 内容
- .myShopTour-con{
- .data-list{
- height: calc(100vh - 84px);
- .swiper-item{
- .scroll-con{
- height: 100%;
- .loadmore{
- padding: 30upx;
- }
- }
- }
- }
- }
- }
- </style>
|