├── .gitignore
├── App.vue
├── README.md
├── components
    ├── clickCircle.vue
    ├── navTab.vue
    ├── refresh.vue
    └── tabBar4.vue
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── index
    │   └── index.vue
    ├── longIndex
    │   └── longIndex.vue
    └── other
    │   └── other.vue
├── static
    ├── icon-search.png
    ├── icon-yes.png
    ├── index.png
    ├── index_change.png
    └── logo.png
├── uni.scss
└── util
    └── util.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /unpackage/
2 | /node_modules/


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function() {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function() {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function() {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	/*每个页面公共css */
17 | 	::-webkit-scrollbar {
18 | 	  width: 0;
19 | 	  height: 0;
20 | 	  color: transparent;
21 | 	}
22 | </style>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # html tab组件说明 #
 2 | 	<view class="container999">
 3 | 	<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
 4 | 	<view>
 5 | 	    //script
 6 | 	    // 引入tab
 7 | 	    import navTab from "../../components/navTab.vue"
 8 | 	    export default {
 9 | 	    components: {
10 | 	    navTab
11 | 	    },
12 | 	    data() {
13 | 	    return {
14 | 	    currentTab: 0, //sweiper所在页
15 | 	    tabTitle:['选择一','选择二','选择三','选择四'], //导航栏格式
16 | 	    }
17 | 	    },
18 | 	    methods:{
19 | 	    // tab事件
20 | 	    	changeTab(index){
21 | 	    			this.currentTab = index;
22 | 	    		},
23 | 	    // swiper 滑动 如果tab关联swiper需要写下面的方法 否则不写
24 | 	    swiperTab: function(e) {
25 | 	    			var index = e.detail.current //获取索引
26 | 	    			this.$refs.navTab.longClick(index);
27 | 	    		},
28 | 	    }
29 | 	    };
30 | 			    
31 | # html 下拉刷新组件说明  #		
32 | 			//最外层加上touch事件
33 | 			//刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true
34 |     		<viewclass="container999" 
35 |     			@touchstart="refreshStart" 
36 |     			@touchmove="refreshMove" 
37 |     			@touchend="refreshEnd"
38 |     		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
39 |     		</view>
40 |     		//script
41 |     		// 引入下拉刷新
42 |     		import refresh from '../../components/refresh.vue';
43 |     		export default {
44 |     		components: {refresh},
45 |     		data() {
46 |     		return {
47 |     		
48 |     		};
49 |     		},
50 |     		methods: {
51 |     		refreshStart(e) {
52 |     		this.$refs.refresh.refreshStart(e);
53 |     		},
54 |     		refreshMove(e){
55 |     		this.$refs.refresh.refreshMove(e);
56 |     		},
57 |     		refreshEnd(e) {
58 |     		this.$refs.refresh.refreshEnd(e);
59 |     		},
60 |     		//刷新名需写为isRefresh,刷新组件中会回调此事件
61 |     		   	isRefresh(){
62 |     					setTimeout(() => {
63 |     					uni.showToast({
64 |     					icon: 'success',
65 |     					title: '刷新成功'
66 |     					})
67 |     					this.$refs.refresh.endAfter() //刷新结束调用
68 |     					}, 1000)
69 |     				}
70 |     		}
71 |     		};


--------------------------------------------------------------------------------
/components/clickCircle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="circle" v-if="circleShow == 1" :style="isCricle" :class="circleShow==1?ainimaChoose:''"></view>
  3 | </template>
  4 | 
  5 | <script>
  6 | 	export default {
  7 | 		name: 'clickCircle',
  8 | 		data() {
  9 | 			return {
 10 | 				isReady:1,
 11 | 				isCricle:'',
 12 | 				circleShow:0,
 13 | 				ainimaChoose:''
 14 | 			};
 15 | 		},
 16 | 		created() {
 17 | 			if(Math.random() >= 0.5) {
 18 | 				this.ainimaChoose = 'animation0'
 19 | 			} else{
 20 | 				this.ainimaChoose = 'animation1'
 21 | 			}
 22 | 		},
 23 | 		methods:{
 24 | 			conClick(e){
 25 | 				var isReady = this.isReady
 26 | 				if (isReady === 1) {
 27 | 					// #ifdef H5
 28 | 					var isTop = Math.round(e.changedTouches[0].clientY) + 15 + 'px'
 29 | 					var isLeft = Math.round(e.changedTouches[0].clientX) - 25 + 'px'
 30 | 					// #endif
 31 | 					// #ifndef H5
 32 | 					  var isTop = Math.round(e.changedTouches[0].clientY) - 25 + 'px'
 33 | 					  var isLeft = Math.round(e.changedTouches[0].clientX) - 25 + 'px'
 34 | 					// #endif
 35 | 					this.isCricle = `top:${isTop};left:${isLeft};`
 36 | 					this.circleShow = 1
 37 | 					this.isReady = 0
 38 | 					var that = this
 39 | 				  setTimeout(() => {
 40 | 					  that.circleShow = 0
 41 | 					  that.isReady = 1
 42 | 				  }, 300)
 43 | 				}
 44 | 			}
 45 | 		}
 46 | 	}
 47 | </script>
 48 | 
 49 | <style lang="scss">
 50 | 	.circle{
 51 | 	width: 100upx;
 52 | 	height: 100upx;
 53 | 	border-radius: 100%;
 54 | 	position: fixed;
 55 | 	z-index: 999;
 56 | 	}
 57 | 	
 58 | 	
 59 | 	// 动画0
 60 | 	.animation0::before, .animation0::after {
 61 |   position: absolute;
 62 |   content: '';
 63 |   display: block;
 64 |   width: 140%;
 65 |   height: 100%;
 66 |   left: -20%;
 67 |   z-index: -1000;
 68 |   transition: all ease-in-out 0.5s;
 69 |   background-repeat: no-repeat;
 70 | }
 71 | 	
 72 | 	.animation0::before{
 73 | 		  display: none;
 74 | 		  top: -55%;
 75 | 		  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
 76 | 		  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
 77 | 	}
 78 | 	.animation0::after{
 79 | 		  display: none;
 80 | 		  bottom: -55%;
 81 | 		  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
 82 | 		  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
 83 | 	}
 84 | 	
 85 | 	
 86 | 	.animation0::before{
 87 | 	display: block;
 88 | 	animation: topBubbles ease-in-out 0.75s forwards;
 89 | 	}
 90 | 	.animation0::after{
 91 | 		display: block;
 92 | 	animation: bottomBubbles ease-in-out 0.75s forwards;
 93 | 	}
 94 | 	
 95 | 	@keyframes topBubbles {
 96 |   0% {
 97 |     background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
 98 |   }
 99 |   50% {
100 |     background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
101 |   }
102 |   100% {
103 |     background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
104 |     background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
105 |   }
106 | }
107 | @keyframes bottomBubbles {
108 |   0% {
109 |     background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
110 |   }
111 |   50% {
112 |     background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
113 |   }
114 |   100% {
115 |     background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
116 |     background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
117 |   }
118 | }
119 | 
120 | 	// 动画1
121 | 	.animation1{
122 | 	animation: shockwave 0.3s 0s linear;
123 | 	}
124 | 	@keyframes shockwave {
125 | 	  0% {
126 | 	    transform: scale(1);
127 | 	    box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
128 | 	  }
129 | 	  95% {
130 | 	    box-shadow: 0 0 50px rgba(0, 0, 0, 0), inset 0 0 30px rgba(0, 0, 0, 0);
131 | 	  }
132 | 	  100% {
133 | 	    transform: scale(2.25);
134 | 	  }
135 | 	}
136 | 	
137 | 	
138 | </style>
139 | 


--------------------------------------------------------------------------------
/components/navTab.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="navTabBox">
  3 | 		<view class="longTab">
  4 | 			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-left="tabLeft">
  5 | 				<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index" :class="index===tabClick?'click':''" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index" @click="longClick(index)">{{item}}</view>
  6 | 				<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
  7 | 					<view class="underline"></view>
  8 | 				</view>
  9 | 			</scroll-view>
 10 | 		</view>
 11 | 	</view>
 12 | </template>
 13 | 
 14 | <script>
 15 | 	export default {
 16 | 		name: 'navTab',
 17 | 		props: {
 18 | 			tabTitle: {
 19 | 				type: Array,
 20 | 				default: []
 21 | 			}
 22 | 
 23 | 		},
 24 | 		data() {
 25 | 			return {
 26 | 				tabClick: 0, //导航栏被点击
 27 | 				isLeft: 0, //导航栏下划线位置
 28 | 				isWidth: 0, //每个导航栏占位
 29 | 				tabLeft:0
 30 | 			};
 31 | 		},
 32 | 		created() {
 33 | 			var that = this
 34 | 			// 获取设备宽度
 35 | 			uni.getSystemInfo({
 36 | 				success(e) {
 37 | 					if(that.tabTitle.length<= 5 ){
 38 | 						that.isWidth = e.windowWidth / that.tabTitle.length //宽度除以导航标题个数=一个导航所占宽度	
 39 | 					} else {
 40 | 						that.isWidth = e.windowWidth / 5 
 41 | 					}
 42 | 				}
 43 | 			})
 44 | 		},
 45 | 		methods: {
 46 | 			// 导航栏点击
 47 | 			longClick(index){
 48 | 				    if(this.tabTitle.length>5){
 49 | 						var tempIndex = index - 2;
 50 | 						tempIndex = tempIndex<=0 ? 0 : tempIndex;
 51 | 						this.tabLeft = (index-2) * this.isWidth //设置下划线位置
 52 | 					}
 53 | 					this.tabClick = index //设置导航点击了哪一个
 54 | 					this.isLeft = index * this.isWidth //设置下划线位置
 55 | 					this.$emit('changeTab', index);//设置swiper的第几页
 56 | 					// this.$parent.currentTab = index //设置swiper的第几页
 57 | 			}
 58 | 		}
 59 | 	}
 60 | </script>
 61 | 
 62 | <style lang="scss">
 63 | 	.navTabBox {
 64 | 		width: 100vw;
 65 | 		color: rgba(255, 255, 255, 0.50);
 66 | 		.click {
 67 | 			color: white;
 68 | 		}
 69 | 		.longTab {
 70 | 			width: 100%;
 71 | 			.longItem{ 
 72 | 				height: 90upx; 
 73 | 				display: inline-block;
 74 | 				line-height: 90upx;
 75 | 				text-align: center;
 76 | 			}
 77 | 			.underlineBox {
 78 | 				height: 3px;
 79 | 				width: 20%;
 80 | 				display: flex;
 81 | 				align-content: center;
 82 | 				justify-content: center;
 83 | 				transition: .5s;
 84 | 				.underline {
 85 | 					width: 84upx;
 86 | 					height: 4px;
 87 | 					background-color: white;
 88 | 				}
 89 | 			}
 90 | 		}
 91 | 		.shortTab {
 92 | 			width: 100%;
 93 | 			.navTab {
 94 | 				display: flex;
 95 | 				width: 100%;
 96 | 				height: 90upx;
 97 | 				position: relative;
 98 | 				.navTabItem {
 99 | 					display: flex;
100 | 					align-items: center;
101 | 					justify-content: center;
102 | 					width: 100%;
103 | 					font-size: 28upx;
104 | 				}
105 | 			}
106 | 			.underlineBox {
107 | 				height: 3px;
108 | 				display: flex;
109 | 				align-content: center;
110 | 				justify-content: center;
111 | 				transition: .5s;
112 | 				.underline {
113 | 					width: 84upx;
114 | 					height: 3px;
115 | 					background-color: white;
116 | 				}
117 | 			}
118 | 		}
119 | 	}
120 | </style>
121 | 


--------------------------------------------------------------------------------
/components/refresh.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class='refreshBox' :style="isTranform">
  3 | 		<view class='refresh' :style="isZoom" :class="isEnd==2?'animationSmall':''">
  4 | 			<view class='refreshWord' v-if="isEnd == 0">松开刷新</view>
  5 | 			<view class='refreshCirle animation' v-if="isEnd == 1"></view>
  6 | 			<image class='iconYes' src='../static/icon-yes.png' v-if="isEnd==2"></image>
  7 | 		</view>
  8 | 	</view>
  9 | 	</view>
 10 | </template>
 11 | 
 12 | <script>
 13 | 	export default {
 14 | 		name: 'refresh',
 15 | 		props: {
 16 | 			  isTop:{
 17 | 				  type:Number,
 18 | 				  default:1
 19 | 			  }
 20 | 		},
 21 | 		data() {
 22 | 			return {
 23 | 				isTranf: 0,
 24 | 				touchStart: '',
 25 | 				touchMove: '',
 26 | 				isEnd: 0
 27 | 			};
 28 | 		},
 29 | 		
 30 | 		methods: {
 31 | 			refreshStart(e) {
 32 | 				if (this.isEnd == 0 && this.isTop == 1) {
 33 | 					this.touchStart = e.changedTouches[0].pageY
 34 | 				}
 35 | 			},
 36 | 			refreshMove(e){
 37 | 				if (this.isEnd == 0 && this.isTop == 1) {
 38 | 					var touchStart = this.touchStart,
 39 | 						oldMove = this.touchMove,
 40 | 						newMove = e.changedTouches[0].pageY
 41 | 					if (touchStart <= newMove) {
 42 | 						var isTranf = touchStart > newMove ? 0 : newMove - touchStart
 43 | 						this.isTranf = isTranf
 44 | 						this.touchMove = e.changedTouches[0].pageY
 45 | 					}
 46 | 				} else{
 47 | 					this.isTranf = 0
 48 | 					this.isEnd = 0
 49 | 					this.touchStart = 9999
 50 | 				}
 51 | 			},
 52 | 			refreshEnd(e) {
 53 | 				var that = this
 54 | 				if (this.isEnd == 0 && this.isTop == 1) {
 55 | 					if (this.isTranf >= 90) {
 56 | 						this.isTranf = 125
 57 | 						this.isEnd = 1
 58 | 						this.$emit('isRefresh');
 59 | 					} else {
 60 | 						this.isTranf = 0
 61 | 					}
 62 | 				}
 63 | 			},
 64 | 			endAfter(){
 65 | 				this.isEnd = 2
 66 | 				setTimeout(() => {
 67 | 					this.isTranf = 0
 68 | 					this.isEnd = 0
 69 | 				}, 600)
 70 | 			}
 71 | 		},
 72 | 		computed: {
 73 | 			isTranform() {
 74 | 				var isTranf = this.isTranf > 150 ? 150 : this.isTranf
 75 | 				var isTemp = `transform: translateY(${isTranf-100}px);`
 76 | 				return isTemp
 77 | 			},
 78 | 			isZoom() {
 79 | 				var isTranf = this.isTranf > 125 ? 125 : this.isTranf
 80 | 				var isTemp = `zoom:${isTranf/125};`
 81 | 				return isTemp
 82 | 			}
 83 | 		}
 84 | 
 85 | 	}
 86 | </script>
 87 | 
 88 | <style lang="scss">
 89 | 	.refreshBox {
 90 | 		margin:0 auto;
 91 | 		width: 100%;
 92 | 		height: 100upx;
 93 | 		overflow: hidden;
 94 | 		display: flex;
 95 | 		align-items: center;
 96 | 		justify-content: center;
 97 | 		max-height: 300upx;
 98 | 		position: fixed;
 99 | 		z-index: 999;
100 | 		top: 0;
101 | 		left: 0;
102 | 		transform: translateY(-100upx);
103 | 	}
104 | 
105 | 	.animationSmall {
106 | 		animation: small 1.1s both;
107 | 	}
108 | 
109 | 	@keyframes small {
110 | 		0% {
111 | 			transform: scale(1)
112 | 		}
113 | 		20%{
114 | 			transform: scale(1.4)
115 | 		}
116 | 		100% {
117 | 			transform: scale(0)
118 | 		}
119 | 	}
120 | 	.refreshWord{
121 | 		width: 150upx;
122 | 		height: 26upx;
123 | 		font-size: 24upx;
124 | 		line-height: 26upx;
125 | 		text-align: center;
126 | 		border-radius: 26upx;
127 | 	}
128 | 
129 | 	.refresh {
130 | 		min-width: 50upx;
131 | 		display: flex;
132 | 		align-items: center;
133 | 		justify-content: center;
134 | 		height: 50upx;
135 | 		background: #FFFFFF;
136 | 		box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.10);
137 | 		border-radius: 50upx;
138 | 	}
139 | 
140 | 	.refreshCirle {
141 | 		width: 26upx;
142 | 		height: 26upx;
143 | 		border-radius: 50%;
144 | 		display: inline-block;
145 | 		position: relative;
146 | 		border: 6upx solid black;
147 | 		border-bottom-color: transparent;
148 | 		border-top-color: transparent;
149 | 	}
150 | 
151 | 	.animation {
152 | 		animation: rotate 1.1s infinite;
153 | 		animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
154 | 	}
155 | 
156 | 	@keyframes rotate {
157 | 		0% {
158 | 			transform: rotate(0deg);
159 | 		}
160 | 
161 | 		100% {
162 | 			transform: rotate(360deg);
163 | 		}
164 | 	}
165 | 
166 | 	.true {
167 | 		color: black;
168 | 	}
169 | 
170 | 	.iconYes {
171 | 		width: 34upx;
172 | 		height: 34upx;
173 | 	}
174 | </style>
175 | 


--------------------------------------------------------------------------------
/components/tabBar4.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="tabBar">
  3 | 		<view
  4 | 		 v-for="(item,index) in tabBar" 
  5 | 		 :key="item.url" 
  6 | 		 class="tabbar_item" 
  7 | 		 :class="{'active':item.url == currentPage}"
  8 | 		 @click="navTo(item)"
  9 | 		 >
 10 | 			<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
 11 | 			<image v-else :src="item.imgNormal" mode=""></image>
 12 | 			<view class="text">{{item.text}}</view>
 13 | 		</view>
 14 | 	</view>
 15 | </template>
 16 | 
 17 | <script>
 18 | 	export default {
 19 | 		props:{
 20 | 			currentPage:{
 21 | 				type:String,
 22 | 				default:'index'
 23 | 			}
 24 | 		},
 25 | 		data() {
 26 | 			return {
 27 | 				tabBar:[{
 28 | 						url:'index',
 29 | 						text:'短模板',
 30 | 						imgNormal:'../static/index_change.png',
 31 | 						imgClick:'../static/index.png'
 32 | 					},
 33 | 					{
 34 | 						url:'longIndex',
 35 | 						text:'长模板',
 36 | 						imgNormal:'../static/index_change.png',
 37 | 						imgClick:'../static/index.png'
 38 | 					},{
 39 | 						url:'other',
 40 | 						text:'其他示例',
 41 | 						imgNormal:'../static/index_change.png',
 42 | 						imgClick:'../static/index.png'
 43 | 					}]
 44 | 			};
 45 | 		},
 46 | 		created() {
 47 | 			uni.hideTabBar({})
 48 | 		},
 49 | 		computed:{
 50 | 			
 51 | 		},
 52 | 		methods:{
 53 | 			navTo(item){
 54 | 				if(item.url !== this.currentPage){
 55 | 					var isUrl = `/pages/${item.url}/${item.url}`
 56 | 					const that = this
 57 | 					uni.switchTab({
 58 | 						url: isUrl
 59 | 					})
 60 | 				} else{
 61 | 					this.$parent.toTop()
 62 | 				}
 63 | 			}
 64 | 		}
 65 | 	}
 66 | </script>
 67 | 
 68 | <style lang="scss" scoped>
 69 | 	//导航栏设置
 70 | 		$isRadius:0upx; //左上右上圆角
 71 | 		$isWidth:100vw; //导航栏宽度
 72 | 		$isBorder:0px solid white; //边框 不需要则设为0px
 73 | 		$isBg:white; //背景
 74 | 	
 75 | 	// 选中设置
 76 | 		$chooseTextColor:#50B7EA; //选中时字体颜色
 77 | 		$chooseBgColor:transparent; //选中时背景颜色 transparent为透明
 78 | 	
 79 | 	//未选中设置
 80 | 		$normalTextColor:#999; //未选中颜色
 81 | 	.tabBar{
 82 | 		width: $isWidth;
 83 | 		height: 100upx;
 84 | 		position: fixed;
 85 | 		bottom: 0;
 86 | 		left: 0;
 87 | 		right: 0;
 88 | 		box-shadow: 0upx -2upx 10upx rgba(89,125,172,.4);
 89 | 		margin:0 auto;
 90 | 		z-index: 998;
 91 | 		background-color: $isBg;
 92 | 		color: $normalTextColor;
 93 | 		border-left: $isBorder;
 94 | 		border-top: $isBorder;
 95 | 		border-right: $isBorder;
 96 | 		display: flex;
 97 | 		justify-content: space-around;
 98 | 		border-top-right-radius: $isRadius;
 99 | 		border-top-left-radius: $isRadius;
100 | 		box-sizing: border-box;
101 | 		overflow: hidden;
102 | 		.tabbar_item{
103 | 			width: 25%;
104 | 			font-size: 12px;
105 | 			display: flex;
106 | 			flex-direction: column;
107 | 			justify-content: center;
108 | 			align-items: center;
109 | 			&.active{
110 | 				border-left: $isBorder;
111 | 				border-top: $isBorder;
112 | 				background: $chooseBgColor;
113 | 				color: $chooseTextColor;
114 | 			}
115 | 		}
116 | 		image{
117 | 			width: 48upx;
118 | 			height:48upx;
119 | 			margin-left: 5upx;
120 | 		}
121 | 	}
122 | </style>
123 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "列表list左右切换+自定义刷新+加载",
 3 |     "appid" : "",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     /* 5+App特有相关 */
 9 |     "app-plus" : {
10 |         "usingComponents" : true,
11 |         "splashscreen" : {
12 |             "alwaysShowBeforeRender" : true,
13 |             "waiting" : true,
14 |             "autoclose" : true,
15 |             "delay" : 0
16 |         },
17 |         /* 模块配置 */
18 |         "modules" : {},
19 |         /* 应用发布信息 */
20 |         "distribute" : {
21 |             /* android打包配置 */
22 |             "android" : {
23 |                 "permissions" : [
24 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
25 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
26 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
27 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
30 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
31 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
32 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
33 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
34 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
35 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
36 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
37 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
38 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
39 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
42 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
43 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
45 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
46 |                 ]
47 |             },
48 |             /* ios打包配置 */
49 |             "ios" : {},
50 |             /* SDK配置 */
51 |             "sdkConfigs" : {}
52 |         }
53 |     },
54 |     /* 快应用特有相关 */
55 |     "quickapp" : {},
56 |     /* 小程序特有相关 */
57 |     "mp-weixin" : {
58 |         "appid" : "",
59 |         "setting" : {
60 |             "urlCheck" : false
61 |         },
62 |         "usingComponents" : true
63 |     },
64 |     "mp-alipay" : {
65 |         "usingComponents" : true
66 |     },
67 |     "mp-baidu" : {
68 |         "usingComponents" : true
69 |     },
70 |     "mp-toutiao" : {
71 |         "usingComponents" : true
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "列表",
 7 |                 "disableScroll":true
 8 | 			}
 9 | 		}
10 | 	    ,{
11 |             "path" : "pages/longIndex/longIndex",
12 |             "style" : {
13 | 				"navigationBarTitleText": "长tab",
14 | 				"disableScroll":true
15 | 			}
16 |         }
17 |         ,{
18 |             "path" : "pages/other/other",
19 |             "style" : {
20 |             	"navigationBarTitleText": "长tab",
21 |             	"disableScroll":true
22 |             }
23 |         }
24 |     ],
25 | 	"globalStyle": {
26 | 		"navigationBarTextStyle": "white",
27 | 		"navigationBarTitleText": "uni-app",
28 | 		"navigationBarBackgroundColor": "#50B7EA",
29 | 		"backgroundColor": "#50B7EA"
30 | 	},
31 | 		"tabBar": {
32 | 		"color": "#cdcdcd",
33 | 		"selectedColor": "#50B7EA",
34 | 		"borderStyle": "white",
35 | 		"list": [{
36 | 				"pagePath": "pages/index/index",
37 | 				"text": "短tab",
38 | 				"iconPath": "static/index_change.png",
39 | 				"selectedIconPath": "static/index.png"
40 | 			},
41 | 			{
42 | 				"pagePath": "pages/longIndex/longIndex",
43 | 				"text": "长tab",
44 | 				"iconPath": "static/index_change.png",
45 | 				"selectedIconPath": "static/index.png"
46 | 			},
47 | 			{
48 | 				"pagePath": "pages/other/other",
49 | 				"text": "其他",
50 | 				"iconPath": "static/index_change.png",
51 | 				"selectedIconPath": "static/index.png"
52 | 			}
53 | 		]
54 | 	}
55 | }
56 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
  3 | 		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
  4 | 		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
  5 | 		<view class='nav'>
  6 | 			<!-- #ifdef H5 -->
  7 | 				<view style="height: 44px;width: 100%;">边距盒子</view>
  8 | 			<!-- #endif -->
  9 | 			<!-- 搜索 -->
 10 | 			<view class='searchInput999'>
 11 | 				<view class='searchBox999'>
 12 | 					<image src='/static/icon-search.png' class='search999'></image>
 13 | 				</view>
 14 | 				<input class='input999' placeholder="输入关键词"></input>
 15 | 			</view>
 16 | 			<!-- 导航栏 agents导航栏标题 -->
 17 | 			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
 18 | 		</view>
 19 | 		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
 20 | 		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
 21 | 			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
 22 | 				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
 23 | 				<view :id="'top'+listIndex" style="width: 100%;height: 180upx;">边距盒子</view>
 24 | 				<view class='content'>
 25 | 					<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
 26 | 						{{item}}
 27 | 					</view>
 28 | 				</view>
 29 | 				<view class='noCard' v-if="listItem.length===0">
 30 | 					暂无信息
 31 | 				</view>
 32 | 				<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
 33 | 				</scroll-view>
 34 | 			</swiper-item>
 35 | 		</swiper>
 36 | 		<tabBar4 :currentPage="currentPage"></tabBar4>
 37 | 	</view>
 38 | </template>
 39 | 
 40 | <script>
 41 | const util = require('../../util/util.js');
 42 | import refresh from '../../components/refresh.vue';
 43 | import navTab from '../../components/navTab.vue';
 44 | import tabBar4 from '../../components/tabBar4.vue';
 45 | export default {
 46 | 	components: {refresh,navTab,tabBar4},
 47 | 	data() {
 48 | 		return {
 49 | 			currentPage:'index',
 50 | 			toView:'',//回到顶部id
 51 | 			tabTitle:['选择一','选择二','选择三','选择四'], //导航栏格式 --导航栏组件
 52 | 			currentTab: 0, //sweiper所在页
 53 | 			pages:[1,1,1,1], //第几个swiper的第几页
 54 | 			list: [[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],[],['2233','4234','13144','324244']] //数据格式
 55 | 		};
 56 | 	},
 57 | 	onLoad(e) {
 58 | 		
 59 | 	},
 60 | 	onShow() {},
 61 | 	onHide() {},
 62 | 	methods: {
 63 | 		toTop(){
 64 | 			this.toView = ''
 65 | 			setTimeout(()=>{
 66 | 				this.toView = 'top' + this.currentTab
 67 | 			},10)
 68 | 		},
 69 | 		changeTab(index){
 70 | 			this.currentTab = index;
 71 | 		},
 72 | 		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
 73 | 		isRequest() {
 74 | 			return new Promise((resolve, reject) => {
 75 | 				this.pages[this.currentTab]++
 76 | 				var that = this
 77 | 				setTimeout(() => {
 78 | 					uni.hideLoading()
 79 | 					uni.showToast({
 80 | 						icon: 'none',
 81 | 						title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
 82 | 					})
 83 | 					let newData = ['新数据1','新数据2','新数据3']
 84 | 					resolve(newData)
 85 | 				}, 1000)
 86 | 			})
 87 | 		},
 88 | 		// swiper 滑动
 89 | 		swiperTab: function(e) {
 90 | 			var index = e.detail.current //获取索引
 91 | 			this.$refs.navTab.longClick(index);
 92 | 		},
 93 | 		// 加载更多 util.throttle为防抖函数
 94 | 		lower1: util.throttle(function(e) {
 95 | 		console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
 96 | 		uni.showLoading({
 97 | 			title: '加载中',
 98 | 			mask:true
 99 | 		})
100 | 			this.isRequest().then((res)=>{
101 | 				let tempList = this.list
102 | 				tempList[this.currentTab] = tempList[this.currentTab].concat(res)
103 | 				console.log(tempList)
104 | 				this.list = tempList
105 | 				this.$forceUpdate() //二维数组，开启强制渲染
106 | 			})
107 | 		}, 300),
108 | 		// 刷新touch监听
109 | 		refreshStart(e) {
110 | 			this.$refs.refresh.refreshStart(e);
111 | 		},
112 | 		refreshMove(e){
113 | 			this.$refs.refresh.refreshMove(e);
114 | 		},
115 | 		refreshEnd(e) {
116 | 			this.$refs.refresh.refreshEnd(e);
117 | 		},
118 | 		isRefresh(){
119 | 				setTimeout(() => {
120 | 					uni.showToast({
121 | 						icon: 'success',
122 | 						title: '刷新成功'
123 | 					})
124 | 					this.$refs.refresh.endAfter() //刷新结束调用
125 | 				}, 1000)
126 | 		}
127 | 	}
128 | };
129 | </script>
130 | 
131 | <style lang="scss">
132 | 		.container999 {
133 | 	  width: 100vw;
134 | 	  font-size: 28upx;
135 | 	  min-height: 100vh;
136 | 	  overflow: hidden;
137 | 	  color: #6B8082;
138 | 	  position: relative;
139 | 	  background-color: #f6f6f6;
140 | 	}
141 | 	.content {
142 | 		width: 100%;
143 | 	}
144 | 	
145 | 	.card {
146 | 		width: 90%;
147 | 		height: 368upx;
148 | 		background-color: white;
149 | 		margin: 0 auto 42upx auto;
150 | 		background: #FFFFFF;
151 | 		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
152 | 		border-radius: 5px;
153 | 		position: relative;
154 | 	}
155 | 	
156 | 	.noCard {
157 | 		width: 90%;
158 | 		height: 200upx;
159 | 		margin: auto;
160 | 		background-color: white;
161 | 		display: flex;
162 | 		align-items: center;
163 | 		justify-content: center;
164 | 		color: #999999;
165 | 		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
166 | 		border-radius: 10upx;
167 | 	}
168 | 	
169 | 	
170 | 	.nav {
171 | 		position: fixed;
172 | 		left: 0;
173 | 		top: 0;
174 | 		color: white;
175 | 		width: 100%;
176 | 		display: flex;
177 | 		flex-direction: column;
178 | 		align-items: flex-start;
179 | 		justify-content: flex-start;
180 | 		font-size: 24upx;
181 | 		background-color: #50B7EA;
182 | 		z-index: 996;
183 | 	}
184 | 	
185 | 	.searchInput999 {
186 | 		width: 90%;
187 | 		margin: 0 auto;
188 | 		background: white;
189 | 		border-radius: 30upx;
190 | 		display: flex;
191 | 		align-items: center;
192 | 		justify-content: center;
193 | 		height: 56upx;
194 | 	}
195 | 	
196 | 	.search999 {
197 | 		width: 32upx;
198 | 		height: 32upx;
199 | 	}
200 | 	
201 | 	.searchBox999 {
202 | 		width: 56upx;
203 | 		height: 56upx;
204 | 		display: flex;
205 | 		justify-content: center;
206 | 		align-items: center;
207 | 	}
208 | 	
209 | 	.input999 {
210 | 		color: #999;
211 | 		width: 80%;
212 | 	}
213 | </style>
214 | 


--------------------------------------------------------------------------------
/pages/longIndex/longIndex.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
  3 | 		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
  4 | 		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
  5 | 		<view class='nav'>
  6 | 			<!-- #ifdef H5 -->
  7 | 				<view style="height: 44px;width: 100%;">边距盒子</view>
  8 | 			<!-- #endif -->
  9 | 			<!-- 搜索 -->
 10 | 			<view class='searchInput999'>
 11 | 				<view class='searchBox999'>
 12 | 					<image src='/static/icon-search.png' class='search999'></image>
 13 | 				</view>
 14 | 				<input class='input999' placeholder="输入关键词"></input>
 15 | 			</view>
 16 | 			<!-- 导航栏 agents导航栏标题 -->
 17 | 			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
 18 | 		</view>
 19 | 		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
 20 | 		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
 21 | 			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
 22 | 				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
 23 | 				<view :id="'top'+listIndex" style="width: 100%;height: 180upx;">边距盒子</view>
 24 | 				<view class='content'>
 25 | 					<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
 26 | 						{{item}}
 27 | 					</view>
 28 | 				</view>
 29 | 				<view class='noCard' v-if="listItem.length===0">
 30 | 					暂无信息
 31 | 				</view>
 32 | 				<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
 33 | 				</scroll-view>
 34 | 			</swiper-item>
 35 | 		</swiper>
 36 | 		<tabBar4 :currentPage="currentPage"></tabBar4>
 37 | 	</view>
 38 | </template>
 39 | 
 40 | <script>
 41 | const util = require('../../util/util.js');
 42 | import refresh from '../../components/refresh.vue';
 43 | import navTab from '../../components/navTab.vue';
 44 | import tabBar4 from '../../components/tabBar4.vue';
 45 | export default {
 46 | 	components: {refresh,navTab,tabBar4},
 47 | 	data() {
 48 | 		return {
 49 | 			toView:'',//回到顶部id
 50 | 		   currentPage:'longIndex',
 51 | 		   currentTab: 0, //sweiper所在页
 52 | 			pages:[1,1,1,1,1,1,1,1,1], //第几页存储 
 53 | 			tabTitle:['选择一','选择二','选择三','选择四','选择五','选择六','选择七','选择八','选择九'], //导航栏格式
 54 | 			list: [[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],[],['2233','4234','13144','324244'],[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],['7'],['8'],['9号']] //数据格式
 55 | 		  };
 56 | 	},
 57 | 	onLoad(e) {
 58 | 		
 59 | 	},
 60 | 	onShow() {},
 61 | 	onHide() {},
 62 | 	methods: {
 63 | 		toTop(){
 64 | 			this.toView = ''
 65 | 			setTimeout(()=>{
 66 | 				this.toView = 'top' + this.currentTab
 67 | 			},10)
 68 | 		},
 69 | 		changeTab(index){
 70 | 			this.currentTab = index
 71 | 		},
 72 | 		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
 73 | 		isRequest(pages) {
 74 | 			return new Promise((resolve, reject) => {
 75 | 				this.pages[this.currentTab]++
 76 | 				var that = this
 77 | 				setTimeout(() => {
 78 | 					uni.hideLoading()
 79 | 					uni.showToast({
 80 | 						icon: 'none',
 81 | 						title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
 82 | 					})
 83 | 					let newData = ['新数据1','新数据2','新数据3']
 84 | 					resolve(newData)
 85 | 				}, 1000)
 86 | 			})
 87 | 		},
 88 | 		// swiper 滑动
 89 | 		swiperTab: function(e) {
 90 | 			var index = e.detail.current //获取索引
 91 | 			this.$refs.navTab.longClick(index);
 92 | 		},
 93 | 		// 加载更多 util.throttle为防抖函数
 94 | 		lower1: util.throttle(function(e) {
 95 | 		console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
 96 | 		uni.showLoading({
 97 | 			title: '加载中',
 98 | 			mask:true
 99 | 		})
100 | 			this.isRequest().then((res)=>{
101 | 				let tempList = this.list
102 | 				tempList[this.currentTab] = tempList[this.currentTab].concat(res)
103 | 				console.log(tempList)
104 | 				this.list = tempList
105 | 				this.$forceUpdate() //二维数组，开启强制渲染
106 | 			})
107 | 		}, 300),
108 | 		// 刷新touch监听
109 | 		refreshStart(e) {
110 | 			this.$refs.refresh.refreshStart(e);
111 | 		},
112 | 		refreshMove(e){
113 | 			this.$refs.refresh.refreshMove(e);
114 | 		},
115 | 		refreshEnd(e) {
116 | 			this.$refs.refresh.refreshEnd(e);
117 | 		},
118 | 		isRefresh(){
119 | 				setTimeout(() => {
120 | 					uni.showToast({
121 | 						icon: 'success',
122 | 						title: '刷新成功'
123 | 					})
124 | 					this.$refs.refresh.endAfter() //刷新结束调用
125 | 				}, 1000)
126 | 		}
127 | 	}
128 | };
129 | </script>
130 | 
131 | <style lang="scss">
132 | 		.container999 {
133 | 	  width: 100vw;
134 | 	  font-size: 28upx;
135 | 	  min-height: 100vh;
136 | 	  overflow: hidden;
137 | 	  color: #6B8082;
138 | 	  position: relative;
139 | 	  background-color: #f6f6f6;
140 | 	}
141 | 	.content {
142 | 		width: 100%;
143 | 	}
144 | 	
145 | 	.card {
146 | 		width: 90%;
147 | 		height: 368upx;
148 | 		background-color: white;
149 | 		margin: 0 auto 42upx auto;
150 | 		background: #FFFFFF;
151 | 		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
152 | 		border-radius: 5px;
153 | 		position: relative;
154 | 	}
155 | 	
156 | 	.noCard {
157 | 		width: 90%;
158 | 		height: 200upx;
159 | 		margin: auto;
160 | 		background-color: white;
161 | 		display: flex;
162 | 		align-items: center;
163 | 		justify-content: center;
164 | 		color: #999999;
165 | 		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
166 | 		border-radius: 10upx;
167 | 	}
168 | 	
169 | 	
170 | 	.nav {
171 | 		position: fixed;
172 | 		left: 0;
173 | 		top: 0;
174 | 		color: white;
175 | 		width: 100%;
176 | 		display: flex;
177 | 		flex-direction: column;
178 | 		align-items: flex-start;
179 | 		justify-content: flex-start;
180 | 		font-size: 24upx;
181 | 		background-color: #50B7EA;
182 | 		z-index: 996;
183 | 	}
184 | 	
185 | 	.searchInput999 {
186 | 		width: 90%;
187 | 		margin: 0 auto;
188 | 		background: white;
189 | 		border-radius: 30upx;
190 | 		display: flex;
191 | 		align-items: center;
192 | 		justify-content: center;
193 | 		height: 56upx;
194 | 	}
195 | 	
196 | 	.search999 {
197 | 		width: 32upx;
198 | 		height: 32upx;
199 | 	}
200 | 	
201 | 	.searchBox999 {
202 | 		width: 56upx;
203 | 		height: 56upx;
204 | 		display: flex;
205 | 		justify-content: center;
206 | 		align-items: center;
207 | 	}
208 | 	
209 | 	.input999 {
210 | 		color: #999;
211 | 		width: 80%;
212 | 	}
213 | </style>
214 | 


--------------------------------------------------------------------------------
/pages/other/other.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="container999" @click="conClick" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
  3 | 		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
  4 | 		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
  5 | 				<!-- 点击反馈组件 -->
  6 | 		<clickCircle ref="clickCircle"></clickCircle>
  7 | 		<view class='nav'>
  8 | 			<!-- #ifdef H5 -->
  9 | 				<view style="height: 44px;width: 100%;">边距盒子</view>
 10 | 			<!-- #endif -->
 11 | 			<!-- 搜索 -->
 12 | 			<view class='searchInput999'>
 13 | 				<view class='searchBox999'>
 14 | 					<image src='/static/icon-search.png' class='search999'></image>
 15 | 				</view>
 16 | 				<input class='input999' placeholder="输入关键词"></input>
 17 | 			</view>
 18 | 			<!-- 导航栏 agents导航栏标题 -->
 19 | 			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
 20 | 		</view>
 21 | 		<!-- 回到顶部悬浮按钮 -->
 22 | 		<movable-area style="height: 100vh; width: 100vw;position: absolute;bottom: 0;">
 23 | 		    <movable-view class="addBtnBox" style="padding-top:120upx;padding-bottom:120upx;"  @touchmove.stop="" :x="isX" :y="isY" direction="all">
 24 | 				<view class="addBtn" @click="toTop">TOP</view>
 25 | 		    </movable-view>
 26 | 		</movable-area>
 27 | 		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
 28 | 		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
 29 | 			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
 30 | 				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
 31 | 				<view :id="'top'+listIndex" style="width: 100%;height: 180upx;">边距盒子</view>
 32 | 				<view class='content'>
 33 | 					<view v-if="listIndex == 0">我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容我是第一页特有的内容</view>
 34 | 					<view v-if="listIndex == 1">
 35 | 						我是轮播图
 36 | 						<swiper style="height: 30vh;width: 100vw;">
 37 | 							<swiper-item v-for="(item,inde) in 3" :key="inde">
 38 | 								<image style="height: 100%;width:100%;" src="../../static/logo.png"></image>
 39 | 							</swiper-item>
 40 | 						</swiper>
 41 | 					</view>
 42 | 					<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
 43 | 						{{item}}
 44 | 					</view>
 45 | 				</view>
 46 | 				<view class='noCard' v-if="listItem.length===0">
 47 | 					暂无信息
 48 | 				</view>
 49 | 				<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
 50 | 				</scroll-view>
 51 | 			</swiper-item>
 52 | 		</swiper>
 53 | 		<tabBar4 :currentPage="currentPage"></tabBar4>
 54 | 	</view>
 55 | </template>
 56 | 
 57 | <script>
 58 | const util = require('../../util/util.js');
 59 | import refresh from '../../components/refresh.vue';
 60 | import navTab from '../../components/navTab.vue';
 61 | import clickCircle from '../../components/clickCircle.vue';
 62 | import tabBar4 from '../../components/tabBar4.vue';
 63 | export default {
 64 | 	components: {refresh,navTab,clickCircle,tabBar4},
 65 | 	data() {
 66 | 		return {
 67 | 			currentPage:'other',
 68 | 			toView:'',//回到顶部id
 69 | 			isX:0,//放在store统一管理
 70 | 			isY:999,//放在store统一管理
 71 | 			tabTitle:['选择一','选择二','选择三','选择四'], //导航栏格式 --导航栏组件
 72 | 			currentTab: 0, //sweiper所在页
 73 | 			pages:[1,1,1,1], //第几个swiper的第几页
 74 | 			list: [[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],[],['2233','4234','13144','324244']] //数据格式
 75 | 		};
 76 | 	},
 77 | 	onLoad(e) {
 78 | 		
 79 | 	},
 80 | 	onShow() {},
 81 | 	onHide() {},
 82 | 	methods: {
 83 | 		toTop(){
 84 | 			this.toView = ''
 85 | 			setTimeout(()=>{
 86 | 				this.toView = 'top' + this.currentTab
 87 | 			},10)
 88 | 		},
 89 | 		changeTab(index){
 90 | 			this.currentTab = index
 91 | 		},
 92 | 		// 点击反馈事件
 93 | 		conClick(e) {
 94 | 		    this.$refs.clickCircle.conClick(e);
 95 | 		},
 96 | 		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
 97 | 		isRequest(pages) {
 98 | 			return new Promise((resolve, reject) => {
 99 | 				this.pages[this.currentTab]++
100 | 				var that = this
101 | 				setTimeout(() => {
102 | 					uni.hideLoading()
103 | 					uni.showToast({
104 | 						icon: 'none',
105 | 						title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
106 | 					})
107 | 					let newData = ['新数据1','新数据2','新数据3']
108 | 					resolve(newData)
109 | 				}, 1000)
110 | 			})
111 | 		},
112 | 		// swiper 滑动
113 | 		swiperTab: function(e) {
114 | 			var index = e.detail.current //获取索引
115 | 			this.$refs.navTab.longClick(index);
116 | 		},
117 | 		// 加载更多 util.throttle为防抖函数
118 | 		lower1: util.throttle(function(e) {
119 | 		console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
120 | 		uni.showLoading({
121 | 			title: '加载中',
122 | 			mask:true
123 | 		})
124 | 			this.isRequest().then((res)=>{
125 | 				let tempList = this.list
126 | 				tempList[this.currentTab] = tempList[this.currentTab].concat(res)
127 | 				console.log(tempList)
128 | 				this.list = tempList
129 | 				this.$forceUpdate() //二维数组，开启强制渲染
130 | 			})
131 | 		}, 300),
132 | 		// 刷新touch监听
133 | 		refreshStart(e) {
134 | 			this.$refs.refresh.refreshStart(e);
135 | 		},
136 | 		refreshMove(e){
137 | 			this.$refs.refresh.refreshMove(e);
138 | 		},
139 | 		refreshEnd(e) {
140 | 			this.$refs.refresh.refreshEnd(e);
141 | 		},
142 | 		isRefresh(){
143 | 				setTimeout(() => {
144 | 					uni.showToast({
145 | 						icon: 'success',
146 | 						title: '刷新成功'
147 | 					})
148 | 					this.$refs.refresh.endAfter() //刷新结束调用
149 | 				}, 1000)
150 | 		}
151 | 	}
152 | };
153 | </script>
154 | 
155 | <style lang="scss">
156 | 	.addBtnBox{
157 | 		position: fixed;
158 | 		z-index:900;
159 | 		width: 140upx;
160 | 		align-items: flex-end;
161 | 		justify-content: center;
162 | 		height: 140upx;
163 | 		display:flex;
164 | 		.addBtn{
165 | 			width: 100upx;
166 | 			height: 100upx;
167 | 			border-radius: 50%;
168 | 			color: white;
169 | 			font-size: 10px;
170 | 			font-weight: bold;
171 | 			background: #444857;
172 | 			line-height: 100upx;
173 | 			text-align: center;
174 | 			box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
175 | 		}
176 | 	}
177 | 		.container999 {
178 | 	  width: 100vw;
179 | 	  font-size: 28upx;
180 | 	  min-height: 100vh;
181 | 	  overflow: hidden;
182 | 	  color: #6B8082;
183 | 	  position: relative;
184 | 	  background-color: #f6f6f6;
185 | 	}
186 | 	.content {
187 | 		width: 100%;
188 | 	}
189 | 	
190 | 	.card {
191 | 		width: 90%;
192 | 		height: 368upx;
193 | 		background-color: white;
194 | 		margin: 0 auto 42upx auto;
195 | 		background: #FFFFFF;
196 | 		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
197 | 		border-radius: 5px;
198 | 		position: relative;
199 | 	}
200 | 	
201 | 	.noCard {
202 | 		width: 90%;
203 | 		height: 200upx;
204 | 		margin: auto;
205 | 		background-color: white;
206 | 		display: flex;
207 | 		align-items: center;
208 | 		justify-content: center;
209 | 		color: #999999;
210 | 		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
211 | 		border-radius: 10upx;
212 | 	}
213 | 	
214 | 	
215 | 	.nav {
216 | 		position: fixed;
217 | 		left: 0;
218 | 		top: 0;
219 | 		color: white;
220 | 		width: 100%;
221 | 		display: flex;
222 | 		flex-direction: column;
223 | 		align-items: flex-start;
224 | 		justify-content: flex-start;
225 | 		font-size: 24upx;
226 | 		background-color: #50B7EA;
227 | 		z-index: 996;
228 | 	}
229 | 	
230 | 	.searchInput999 {
231 | 		width: 90%;
232 | 		margin: 0 auto;
233 | 		background: white;
234 | 		border-radius: 30upx;
235 | 		display: flex;
236 | 		align-items: center;
237 | 		justify-content: center;
238 | 		height: 56upx;
239 | 	}
240 | 	
241 | 	.search999 {
242 | 		width: 32upx;
243 | 		height: 32upx;
244 | 	}
245 | 	
246 | 	.searchBox999 {
247 | 		width: 56upx;
248 | 		height: 56upx;
249 | 		display: flex;
250 | 		justify-content: center;
251 | 		align-items: center;
252 | 	}
253 | 	
254 | 	.input999 {
255 | 		color: #999;
256 | 		width: 80%;
257 | 	}
258 | </style>
259 | 


--------------------------------------------------------------------------------
/static/icon-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seventhcode/uni-list/HEAD/static/icon-search.png


--------------------------------------------------------------------------------
/static/icon-yes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seventhcode/uni-list/HEAD/static/icon-yes.png


--------------------------------------------------------------------------------
/static/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seventhcode/uni-list/HEAD/static/index.png


--------------------------------------------------------------------------------
/static/index_change.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seventhcode/uni-list/HEAD/static/index_change.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seventhcode/uni-list/HEAD/static/logo.png


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 这里是uni-app内置的常用样式变量
 3 |  *
 4 |  * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 5 |  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 6 |  *
 7 |  */
 8 | 
 9 | /**
10 |  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
11 |  *
12 |  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
13 |  */
14 | 
15 | /* 颜色变量 */
16 | 
17 | /* 行为相关颜色 */
18 | $uni-color-primary: #007aff;
19 | $uni-color-success: #4cd964;
20 | $uni-color-warning: #f0ad4e;
21 | $uni-color-error: #dd524d;
22 | 
23 | /* 文字基本颜色 */
24 | $uni-text-color:#333;//基本色
25 | $uni-text-color-inverse:#fff;//反色
26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
27 | $uni-text-color-placeholder: #808080;
28 | $uni-text-color-disable:#c0c0c0;
29 | 
30 | /* 背景颜色 */
31 | $uni-bg-color:#ffffff;
32 | $uni-bg-color-grey:#f8f8f8;
33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
35 | 
36 | /* 边框颜色 */
37 | $uni-border-color:#c8c7cc;
38 | 
39 | /* 尺寸变量 */
40 | 
41 | /* 文字尺寸 */
42 | $uni-font-size-sm:24upx;
43 | $uni-font-size-base:28upx;
44 | $uni-font-size-lg:32upx;
45 | 
46 | /* 图片尺寸 */
47 | $uni-img-size-sm:40upx;
48 | $uni-img-size-base:52upx;
49 | $uni-img-size-lg:80upx;
50 | 
51 | /* Border Radius */
52 | $uni-border-radius-sm: 4upx;
53 | $uni-border-radius-base: 6upx;
54 | $uni-border-radius-lg: 12upx;
55 | $uni-border-radius-circle: 50%;
56 | 
57 | /* 水平间距 */
58 | $uni-spacing-row-sm: 10px;
59 | $uni-spacing-row-base: 20upx;
60 | $uni-spacing-row-lg: 30upx;
61 | 
62 | /* 垂直间距 */
63 | $uni-spacing-col-sm: 8upx;
64 | $uni-spacing-col-base: 16upx;
65 | $uni-spacing-col-lg: 24upx;
66 | 
67 | /* 透明度 */
68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
69 | 
70 | /* 文章场景相关 */
71 | $uni-color-title: #2C405A; // 文章标题颜色
72 | $uni-font-size-title:40upx;
73 | $uni-color-subtitle: #555555; // 二级标题颜色
74 | $uni-font-size-subtitle:36upx;
75 | $uni-color-paragraph: #3F536E; // 文章段落颜色
76 | $uni-font-size-paragraph:30upx;


--------------------------------------------------------------------------------
/util/util.js:
--------------------------------------------------------------------------------
 1 | function throttle(fn, gapTime) {
 2 |   if (gapTime == null || gapTime == undefined) {
 3 |     gapTime = 1500
 4 |   }
 5 | 
 6 |   let _lastTime = null
 7 | 
 8 |   // 返回新的函数
 9 |   return function () {
10 |     let _nowTime = + new Date()
11 |     if (_nowTime - _lastTime > gapTime || !_lastTime) {
12 |       fn.apply(this, arguments)   //将this和参数传给原函数
13 |       _lastTime = _nowTime
14 |     }
15 |   }
16 | }
17 | 
18 | module.exports = {
19 | 	throttle:throttle,
20 | 	vuemixin:{
21 | 		created: function () { console.log(1) }
22 | 	}
23 | }


--------------------------------------------------------------------------------