移动端瀑布流/信息流布局以及交互
生活随笔
收集整理的這篇文章主要介紹了
移动端瀑布流/信息流布局以及交互
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//瀑布流/信息流簡易布局{布局分為左右兩列排版}
1-優點：粘貼復制代碼，小程序，H5通用，絕對滿足80%需求
2-缺點：代碼邏輯復雜用臃腫
3-分析實現思路：---1.布局為左右兩列布局樣式 ===left{狀態顯示兩種：--1長圖形態顯示--2短圖形態顯示}===right{1長圖形態顯示 -2短圖形態顯示}---2.數據源JSON數據List[]，通過狀態區分劃分為left1[],right1[]===例如JSvar list=[{...}];后臺傳遞過來的JSON數據//聲明兩個新數組var left1=[],right1=[];//循環判斷分別追加到left1，right1數組for(var i in list){if(i%2==0){left1.push(list[i]);}if(i%2!=0){right1.push(list[i]);}}===頁面渲染中繼續使用index%2==0,index%2!=0這樣顯示區分
//如圖所示效果
? ? ? ? ? ?
//直接上代碼吧，我不是個能扯皮的人，也不啰嗦?
<html style="font-size: 312.5%;"><head><meta content="yes" name="apple-touch-fullscreen"><meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"><title>購物</title><style type="text/css">html,body {padding: 0px;margin: 0 auto;background-color: #f5f5f5;}[v-cloak] {display: none !important;}.m-lookBlock {width: 3.45rem;-webkit-box-sizing: border-box;box-sizing: border-box;margin-bottom: .2rem;border-radius: .16rem;-webkit-box-align: center;-ms-flex-align: center;align-items: center;overflow: hidden;}.m-videoIconWrapper {position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.m-videoIcon {width: .80rem;height: .80rem;}.m-lookDesc {width: 3.43rem;-webkit-box-sizing: border-box;box-sizing: border-box;padding: .18rem .16rem 0;color: #333;font-size: .28rem;line-height: .4rem;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;lines: 2;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-family: 'PingFangSC-Regular';background-color: #fff;text-align: left;}.m-lookDetail {width: 3.43rem;font-size: .24rem;-webkit-box-sizing: border-box;box-sizing: border-box;padding: .17rem .16rem .24rem;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;background-color: #fff;}.u-placeHolder {width: 3.43rem;height: .17rem;background-color: #fff;}.m-lookImageWrapper {position: relative;background-color: #f2f2f2;}.m-lookImageWrapper .m-image {width: 100%;}.m-userInfo {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-pack: right;-ms-flex-pack: right;justify-content: right;}.m-userpic {width: .48rem;height: .48rem;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: .24rem;border: 1px solid #d9d9d9;}.m-userName {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .22rem;color: #7f7f7f;height: .48rem;line-height: .48rem;margin-left: .08rem;}.m-upArea {width: 1rem;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.m-upText {font-size: .24rem;color: #7f7f7f;max-width: .9rem;text-align: right;height: .32rem;line-height: .32rem;margin-left: .02rem;}.m-hand {width: .32rem;height: .32rem;}.m-singleGoods {width: 3.43rem;background: #FFF;font-family: 'PingFangSC-Light';-webkit-box-sizing: border-box;box-sizing: border-box;}.m-singleGoods .u-singleGoods {width: 3.05rem;border-top: .5px solid #d9d9d9;margin: 0 auto;padding-top: .2rem;padding-bottom: .2rem;}.m-singleGoods .u-singleGoods .u-goodsname {vertical-align: middle;display: inline-block;width: 2.07rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .22rem;color: #333333;line-height: .32rem;height: .32rem;}.m-singleGoods .u-singleGoods .u-goBuy {/* display: inline-block;vertical-align: baseline;vertical-align: middle;width: .88rem;height: .32rem;overflow: hidden;text-align: right;position: relative;right: -.1rem; *//* display: inline-block; *//* vertical-align: baseline; *//* vertical-align: middle; *//* width: .88rem; */height: .32rem;overflow: hidden;text-align: right;position: relative;right: -.1rem;top: -0.3rem;}.m-singleGoods .u-singleGoods .u-goBuy .u-buyText {display: inline-block;vertical-align: top;font-size: .22rem;color: #DD1A21;line-height: .32rem;height: .32rem;}.m-singleGoods .u-singleGoods .u-goBuy .u-arrow {width: .1rem;height: .18rem;line-height: .32rem;margin-left: .04rem;display: inline-block;vertical-align: baseline;position: relative;top: -.04rem;}.m-collectionInfo {-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: .28rem .18rem .36rem .18rem;}.m-collectionIcon {position: absolute;left: .2rem;bottom: .2rem;width: .37rem;height: .29rem;}.m-collectionTitle {display: block;width: 3.09rem;font-size: .32rem;font-weight: bold;color: #333;line-height: .48rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;lines: 1;-webkit-line-clamp: 1;text-align: center;}.m-collectionLine {display: block;width: .48rem;height: .04rem;margin: 0 auto;background: #333;margin-top: .21rem;margin-bottom: .24rem;}.m-collectionText {width: 3.09rem;margin-top: .18rem;font-size: .24rem;line-height: .36rem;color: #333;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;lines: 2;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;}.m-collectBgDefault {background-color: #f4f4f4;}.m-collectBg0 {background-color: #FFE1B2;}.m-collectBg1 {background-color: #FFCABE;}.m-collectBg2 {background-color: #F6D9FF;}.m-collectBg3 {background-color: #D7DEFA;}.m-collectBg4 {background-color: #C4E2FF;}.m-innerWrapper {width: 3.45rem;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: .16rem;-webkit-box-align: center;-ms-flex-align: center;align-items: center;overflow: hidden;}.m-wrapper2 {-webkit-box-align: center;-ms-flex-align: center;align-items: center;background-color: #eeeeee;}.m-lookList {width: 7.1rem;min-height: 10rem;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;margin: 0 auto;margin-top: 0.3rem;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}.m-lookColumn {width: 3.45rem;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}</style></head><body class="content"><div id="app"><div class="m-wrappers"><div class="m-lookList"><div class="m-lookColumn"><div class="m-lookBlock m-shadow" v-for="(item,index) in list1" v-if="index%2==0" v-cloak><div class="m-innerWrapper"><div><div><div class="m-lookImageWrapper" style="width: 3.45rem;"><img :src="item.img" class="m-image" style="width: 3.45rem;"><!----></div><div class="m-lookDesc">{{item.title}}</div><div class="u-placeHolder"></div><div class="m-lookDetail"><div class="m-userInfo"><img src="http://yanxuan.nosdn.127.net/ffe2a907c0bcef00f366be066f5a2a71.jpg?imageView&quality=65&thumbnail=48y48"class="m-userpic"><div class="m-userName">{{item.username}}</div></div><div class="m-upArea"><img src="https://img-blog.csdnimg.cn/2022010614265198484.png"class="m-hand"><div class="m-upText">{{item.num}}</div></div></div><div class="m-singleGoods"><div class="u-singleGoods"><div class="u-goodsname">{{item.content}}</div><div class="u-goBuy"><span class="u-buyText">去購買</span><img src="1"class="u-arrow"></div></div></div></div></div></div></div><!-- end --><div class="m-lookBlock m-shadow" v-for="(item,index) in list1" v-if="index%2!=0" v-cloak><div class="m-innerWrapper"><div><div><div class="m-lookImageWrapper" style="width: 3.45rem;"><img:src="item.img" class="m-image" style="width: 3.45rem;"><!----></div><div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114918","extra":"","type":1}}"class="m-lookDesc">{{item.title}}</div><div class="u-placeHolder"></div><div class="m-lookDetail"><div class="m-userInfo"><img :src="item.img" class="m-userpic"><div class="m-userName">選妹</div></div><div class="m-upArea"><img src="https://img-blog.csdnimg.cn/2022010614265198484.png"class="m-hand"><div class="m-upText">{{item.num}}</div></div></div><!----></div></div></div></div><!-- end --></div><div class="m-lookColumn"><div class="m-lookBlock m-shadow" v-for="(item,index) in list2" v-if="index%2==0" v-cloak><div class="m-innerWrapper"><div><div><div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114976","extra":"","type":1}}"class="m-lookImageWrapper" style="width: 3.45rem;"><img :src="item.img" class="m-image" style="width: 3.45rem;"><!----></div><div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114976","extra":"","type":1}}"class="m-lookDesc">{{item.title}}</div><div class="u-placeHolder"></div><div class="m-lookDetail"><div class="m-userInfo"><img :src="item.img" class="m-userpic"><div class="m-userName">選購指南</div></div><div class="m-upArea"><img src="https://img-blog.csdnimg.cn/2022010614265198484.png"class="m-hand"><div class="m-upText">{{item.num}}</div></div></div><!----></div></div></div></div><div class="m-lookBlock m-shadow" v-for="(item,index) in list2" v-if="index%2!=0" v-cloak><div class="m-innerWrapper"><div><div><div class="m-lookImageWrapper" style="width: 3.45rem;"><img :src="item.img" class="m-image" style="width: 3.45rem;"><!----></div><div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114945","extra":"","type":2}}"class="m-lookDesc">{{item.title}}</div><div class="u-placeHolder"></div><div class="m-lookDetail"><div class="m-userInfo"><img :src="item.img" class="m-userpic"><div class="m-userName">{{item.username}}</div></div><div class="m-upArea"><img src="https://img-blog.csdnimg.cn/2022010614265198484.png"class="m-hand"><div class="m-upText">{{item.num}}</div></div></div><div class="m-singleGoods"><div class="u-singleGoods"><div class="u-goodsname">{{item.content}}</div><div class="u-goBuy"><span class="u-buyText">去購買</span><img src="1"class="u-arrow"></div></div></div></div></div></div></div><!-- end --></div></div></div></div></div><!----></div><script src="./js/jquery-1.8.3.js"></script><script src="./js/vue.js"></script><script src="./js/vant.min.js"></script><!-- 根數據 --><script>new Vue({el: '#app',data: {mgoodList: [{id: 1,img: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3347864069,1662258004&fm=26&gp=0.jpg",leaver: 1,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",num: 10,username:"菜鳥老五",oldPrice: "789",label: ["特價", "限時優惠"]},{id: 2,img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2789532059,1192373501&fm=26&gp=0.jpg",leaver: 2,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "49",oldPrice: "89",username:"菜鳥老五",num: 100,label: ["新人特價"]},{id: 3,img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3915220323,4170882301&fm=26&gp=0.jpg",leaver: 3,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "159",num: 100,username:"菜鳥老五",oldPrice: "369",label: ["折扣優惠"]},{id: 4,img: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1676365759,391237942&fm=26&gp=0.jpg",leaver: 4,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "29",username:"菜鳥老五",num: 100,oldPrice: "69",label: ["限時優惠"]},{id: 5,img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=947016362,1269262802&fm=26&gp=0.jpg",leaver: 5,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "19",num: 100,username:"菜鳥老五",oldPrice: "69",label: ["限時優惠"]},{id: 6,img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2715504132,2191984566&fm=26&gp=0.jpg",leaver: 6,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",username:"菜鳥老五",num: 100,oldPrice: "69",label: ["限時優惠"]},{id: 7,img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3809412232,1951312228&fm=26&gp=0.jpg",leaver: 7,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",username:"菜鳥老五",oldPrice: "69",num: 100,label: ["限時優惠"]},{id: 8,img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=103206442,1369863903&fm=26&gp=0.jpg",leaver: 8,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",oldPrice: "69",username:"菜鳥老五",num: 100,label: ["限時優惠"]},{id: 9,img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1055672774,1388531180&fm=26&gp=0.jpg",leaver: 9,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",num: 100,username:"菜鳥老五",oldPrice: "69",label: ["限時優惠"]},{id: 10,img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=485381036,160597217&fm=26&gp=0.jpg",leaver: 10,title: "中醫小白輕松上手，無煙便攜艾灸盒",content: "簡易瀑布流布局，你們可以參考一下",price: "349",username:"菜鳥老五",num: 100,oldPrice: "69",label: ["限時優惠"]}],list1: [],list2: []},mounted() {var that = this;that.initData();},methods: {/*** 初始化加載數據* @ param {注意} * 這里的這個mgoodList數據是后臺返回或者自定義的數據* list1左列數據* list2右列數據* 通過I%2這樣分別push近list1，list2* **/ initData() {var that = this;var mgoodList = that.mgoodList;var list1 = that.list1;var list2 = that.list2;for (var i in mgoodList) {if (i % 2 == 0) {list1.push(mgoodList[i]);}if (i % 2 != 0) {list2.push(mgoodList[i]);}}that.list1 = list1;that.list2 = list2;}}})</script></body> </html>?
總結
以上是生活随笔為你收集整理的移动端瀑布流/信息流布局以及交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无限循环小数四则运算_无限循环小数不能进
- 下一篇： Go语言优秀的Revel开源框架推荐