高端网站鉴赏,济南app开发制作,软硬件开发公司,网页设计实训心得体会300字其它都是正常的#xff0c;就是拉上去拉下来自己又回弹回去了#xff0c;拉不到最底部也拉不到最顶部#xff0c;拉来拉去都会是这样的category/index.vueimport CategoryHeader from ./header;import CategoryTab from ./tab;import CategoryConte…其它都是正常的就是拉上去拉下来自己又回弹回去了拉不到最底部也拉不到最顶部拉来拉去都会是这样的category/index.vueimport CategoryHeader from ./header;import CategoryTab from ./tab;import CategoryContent from ./content;export default {name: Category,components: {CategoryHeader,CategoryTab,CategoryContent},data(){return{curId: }},methods:{getCurrentId(id){this.curId id;}}};import ~assets/scss/mixins;.category{overflow: hidden;width:100%;height:100%;background-color:$bgc-theme;}.g-content-container{display:flex;}.sidebar{width: 80px;height:100%;}.main{flex:1;height:100%;}tab.vueclasstab-item:class{tab-item-active: item.id curId}v-for(item,index) in items:keyindexclickswitchTab(item.id){{item.name}}import MeScroll from base/scroll;import {categoryNames} from ./config;export default {name:CategoryTab,components: {MeScroll},data() {return {curId:};},// 因为数据只需要赋值一次所以就把数据写在methods的init()里created(){this.init();this.switchTab(this.items[0].id);},methods:{init(){this.itemscategoryNames;},switchTab(id){if(this.curId id){return;}this.curId id;this.$emit(switch-tab,id)}}};import ~assets/scss/mixins;$tab-item-height: 46px;.tab {width: 100%;-item {height: $tab-item-height;background-color: #fff;border-right: 1px solid $border-color;border-bottom: 1px solid $border-color;color: #080808;font-size: $font-size-l;font-weight: bold;text-align: center;line-height: $tab-item-height;include ellipsis();:last-child {border-bottom: none;}-active {background: none;border-right: none;color: #f23030;}}}base/scroll/index.vue// 滚动条也是使用swiper插件import { swiper, swiperSlide } from vue-awesome-swiper;import MeLoading from base/loading;import {PULL_DOWN_HEIGHT,PULL_DOWN_TEXT_INIT,PULL_DOWN_TEXT_START,PULL_DOWN_TEXT_ING,PULL_DOWN_TEXT_END,PULL_UP_HEIGHT,PULL_UP_TEXT_INIT,PULL_UP_TEXT_START,PULL_UP_TEXT_ING,PULL_UP_TEXT_END} from ./config;export default {components: {swiper,swiperSlide,MeLoading},props: {scrollbar: {type: Boolean,default: true},//这个data是接收data: {type: [Array, Object]},pullDown: {type: Boolean,default: false},pullUp: {type: Boolean,default: false}},watch: {data() {this.update();}},created(){this.init();},methods: {update() {// 外部调用的api//如果它存在的话再调用swiper下面的update()this.$refs.swiper this.$refs.swiper.swiper.update();},scrollToTop(speed,runCallbacks) {// 不是什么回到顶部而是返回到第一个幻灯片this.$refs.swiper this.$refs.swiper.swiper.slideTo(0,speed,runCallbacks)},init(){this.pulling false;this.pullDownText PULL_DOWN_TEXT_INIT;this.pullUpText PULL_UP_TEXT_INIT;this.swiperOption {direction: vertical,slidesPerView: auto, //一页能看几张图片auto是自适应freeMode: true, //如果设置了这个大力滑可以滑很远setWrapperSize: true, //自动给sliderwrapper设置高度scrollbar: {el: this.scrollbar ? .swiper-scrollbar : null,hide: true //是否自动隐藏},on: {sliderMove: this.scroll,touchEnd: this.touchEnd,transitionEnd:this.scrollEnd}}},// 内部自己使用的scroll() {//this.$refs.swiper是通过refs找到这个组件//后面的.swiper就是找到它组件的对象swiper里又很多的属性const swiper this.$refs.swiper.swiper;// 传什么时候显示返回顶部按钮什么时候隐藏this.$emit(scroll,swiper.translate,this.$refs.swiper.swiper);if (this.pulling) {return;}if (swiper.translate 0) {//大于0就是下拉if (!this.pullDown) {return;}if (swiper.translate PULL_DOWN_HEIGHT) {this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);} else {this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);}} //下拉//判断是否到达底部else if (swiper.isEnd) {if (!this.pullUp) {return;}const isPullUp Math.abs(swiper.translate) swiper.height - PULL_UP_HEIGHT parseInt(swiper.$wrapperEl.css(height)); //判断是否到达上拉的触发条件//abs的意思是绝对值if (isPullUp) {this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);} else {this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);}}},//滑动停止后触发的事件scrollEnd(){this.$emit(scroll-end,this.$refs.swiper.swiper.translate,this.$refs.swiper.swiper,this.pulling);},touchEnd() {if (this.pulling) {return;}const swiper this.$refs.swiper.swiper;if (swiper.translate PULL_DOWN_HEIGHT) {//下拉if (!this.pullDown) {return;}this.pulling true;swiper.allowTouchMove false; //正在加载时禁止触摸swiper.setTransition(swiper.params.speed); //通过参数找到初始的速度swiper.setTranslate(PULL_DOWN_HEIGHT); //拖过头了就移动到100的位置swiper.params.virtualTranslate true; //定住不给回弹this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);this.$emit(pull-down, this.pullDownEnd);}//上拉,判断是否到底部else if(swiper.isEnd){const totalHeight parseInt(swiper.$wrapperEl.css(height));const isPullUp Math.abs(swiper.translate) swiper.height - PULL_UP_HEIGHT totalHeight; //判断是否满足触发的条件if(isPullUp){//上拉if(!this.pullUp){return;}this.pulling true;//正在加载中不能够继续加载swiper.allowTouchMove false;//禁止触摸swiper.setTranslate(-(totalHeight PULL_UP_HEIGHT - swiper.height));swiper.params.virtualTranslate true;//定住不给回弹this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);this.$emit(pull-up,this.pullUpEnd);}}},pullDownEnd() {//下拉后恢复原值const swiper this.$refs.swiper.swiper;this.pulling false;this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);swiper.params.virtualTranslate false; //开始可以回弹swiper.allowTouchMove true; //可以触摸swiper.setTransition(swiper.params.speed);swiper.setTranslate(0); //回到0的位置console.log(swiper.params)// 下拉回弹后显示headersetTimeout(() {this.$emit(pull-down-transition-end);},swiper.params.speed);},pullUpEnd(){//上拉后恢复原值const swiper this.$refs.swiper.swiper;this.pulling false;this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);swiper.params.virtualTranslate false;//开始可以回弹swiper.allowTouchMove true;}}};.swiper-container {overflow: hidden;width: 100%;height: 100%;}.swiper-slide {height: auto;}.mine-scroll-pull-up,.mine-scroll-pull-down {position: absolute;left: 0;width: 100%;}.mine-scroll-pull-down {bottom: 100%;height: 80px;}.mine-scroll-pull-up {top: 100%;height: 30px;}
