vue 實現 web端滾動刷新 排序 篩選 響應式布局

先展示效果圖

源碼:

<template><div> <!-- 頭部--><div class="header"><div class="header_select"><el-select v-model="item" @change="changeOption(item)" placeholder="請選擇"><el-optionv-for="(item,index) in options":key="index":value="item.title"></el-option></el-select></div><div class="sort" @click="sort"><div class="up" @click="sort(1)">↑</div><div class="down" @click="sort(2)">↓</div></div></div><!-- 主題部分--><div class="content"> <!-- 左邊排序--><div class="content_left"><div v-for="(item,index) in options" :key="index" @click="changePrice(item)"><p :class="['content_left_title', {'content_left_title_active':changeIndex===index ? true :false}]"@click="changeRed(index)"> {{item.title}}</p></div></div> <!-- 右邊展示--><div class="content_right"> <!-- 柵格布局--><el-row :gutter="10"><el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6" v-for="(item,index) in list" :key="index"><div class="container"><img :src="item.productImage" class="productImage"><div class="container_text"><p class="productName"> {{item.productName}}</p><p class="salePrice"> ￥:{{item.salePrice}}</p><div class="add_div" @click="addCart(item)">加入購物車</div></div></div><!-- 點擊加購的彈出框--><el-dialog:visible.sync="dialogVisible"width="30%":before-close="handleClose"><span class="add_cart_ok_text"> <i class="el-icon-cherry"></i>加購成功<i class="el-icon-ice-tea"></i></span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">繼續加購</el-button><el-button type="primary" @click="lookCart">查看購物車</el-button></span></el-dialog></el-col></el-row> <!-- <h2 v-customShow="imgShow" >沒有數據啦</h2>--> <!-- 底部加載圖片 --><div class="hidden_img" v-customShow="imgShow"><img width="15%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594203057728&di=b98734df67bbe297b4ac80154751a3a3&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F73d00f8e9b5e91aaf8ca7f8fc8c1746b33acb0d563c3d-2lSOZj_fw658"></div></div></div></div> </template><script> import axios from 'axios'export default {name: "Media",data(){return{list:[], //商品的全部數據options:[],//價格排序的數據item:'', //priceList:[], //點擊價格數組courselist:[], //原始的數組changeIndex:0, //點擊紅色左邊框dialogVisible:false, //點擊打開彈窗imgShow:false, //自定義指令i:2, // 下拉加載的下標}},methods:{//改變左邊的價格選項changePrice(item){this.list = []; //先清空 否則會一直追加this.courselist.forEach(ele=>{// 判斷價格的區間范圍 放在展示數組里面if(item.low <= ele.salePrice && ele.salePrice <= item.hight) {this.list.push(ele);}});},// 頭部選項框改變changeOption(item){//遍歷 價格排序的數組let a = this.options.findIndex(ele=>{return ele.title === item});// console.log(this.options[a]);this.list = []; //先清空 否則會一直追加this.courselist.forEach(ele=>{// 判斷價格的區間范圍 放在展示數組里面if(this.options[a].low <= ele.salePrice && ele.salePrice <= this.options[a].hight) {this.list.push(ele);}});},//點擊排序sort(id){switch (id) {case 1:this.list.sort((x,y)=>{return x.salePrice - y.salePrice});break;case 2:this.list.sort((x,y)=>{return y.salePrice - x.salePrice});break;}},//點擊排序 出現紅色左邊框changeRed(index){this.changeIndex = index},//點擊加購addCart(item){this.dialogVisible = true;},//點擊彈出層的X 彈出確認框handleClose(done) {this.$confirm('確認關閉？').then(_ => {done();}).catch(_ => {});},//點擊查看購物車 跳轉路由lookCart(){this.dialogVisible = false;this.$router.push('/lookCart');}},mounted() {axios.get('./media/data.json').then(res=>{//保存一個原始數組this.courselist = res.data.result.list;// 展示商品的數組this.list = res.data.result.list;//左邊價格的選項this.options = res.data.result.slider;}).catch(err=>{console.log(err)});// 實時獲取 滾動的距離window.addEventListener('scroll',()=>{/* 計算滑動到底部 整個文檔的高度 = 可視區域高度 + 滾動的距離*///獲取滾動的距離let scrollHeight = document.documentElement.scrollTop;//獲取整個文檔的高度let docHeight = document.documentElement.scrollHeight;//可視區域高度let seeHeight = document.documentElement.clientHeight;// 整個文檔的高度 - 可視區域高度 - 滾動的距離 === 0 時候 說明 到底部了if(docHeight - seeHeight - scrollHeight < 1) {//loading加載出現this.imgShow = true;//計時器 3秒后loading隱藏 數據請求回來加入數組window.setTimeout(()=>{console.log('達到最底部')//我們的json數據只到 3 所以在這里判斷一下if(this.i === 4 ) {this.imgShow = false;return;}//loading 隱藏this.imgShow = false;//axios請求 jsonaxios.get(`./media/data${this.i}.json`).then(res=>{//擴展運算符 賦值給listthis.list = [...this.list,...res.data.result.list];}).catch(err=>{console.log(err)});this.i++;},3000)}/* console.log(scrollHeight + '滾動距離')console.log(docHeight + '文檔高度')console.log(seeHeight + '可視') */})},// 自定義指令directives:{customShow:{ //自定義指令的名字bind(){},// 只有在插入時候觸發 只用一次 更新不會觸發 我們每次會改變ture false 所以要在更新時寫一遍inserted(el,binding){if(binding.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}},// true false 更新的時觸發update(el,binging){// el 是獲取到當前的元素 binging是當前元素的所有信息if(binging.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}}}}} </script><style scoped>.hidden_img {width: 100%;display: flex;justify-content: center;}.add_cart_ok_text { color:red;}.content_left_title_active{border-left: 2px solid red !important;color: red !important ;font-weight: bold;}.add_div:hover{background-color: rgba(216, 124, 125, 0.5);}.container:hover{z-index: 2;-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);box-shadow: 0 15px 30px rgba(0,0,0,.1);-webkit-transform: translate3d(0,-2px,0);transform: translate3d(0,-2px,0);}.down ,.up {width: 50px;border: 1px solid #fff;text-align: center;height: 30px;line-height: 30px;margin-top: 10px;}.content {width: 100%;display: flex;}.content_left {width: 25%;background-color: #F5F5F5; border-right: 1px solid #eee}.content_right {width: 75%;}.header { display: flex; justify-content: space-around; padding: 0 50px;box-sizing: border-box; width: 100%;height: 50px;line-height: 50px; background-color: #F5F5F5; margin: 5px 0 } .productImage { width: 150px; height:150px;} .productName {color: #666666; font-size: 12px} .salePrice {color: red; font-weight: bold} .container{ transition: all 1s; text-align: center; height: 246px; background-color: #fff; border: 1px solid #eee; margin: 10px 0;} .add_div { width: 95%;height: 40px;line-height: 40px;border: 1px solid red;color: red;text-align: center} .header_select {display: none} .content_left_title { border-left: 2px solid #fff; padding: 20px;box-sizing: border-box;height: 50px;color: #333333} .sort {display: flex;justify-content: space-around; width: 200px;}@media screen and (max-width: 768px){.container{height: 150px;line-height: 150px;}.container img {float: left;}.header_select {display: block}.content_left {display: none}.content_right {width: 100%;}.add_div {width: 50%;}.container_text {display: flex;justify-content: space-around;align-items: center;} }</style>

總結

以上是生活随笔為你收集整理的vue 实现 web端滚动刷新 排序 筛选 响应式布局 (源码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。