移动端瀑布流/信息流布局以及交互
2024-06-08 06:15:19
//瀑布流/信息流简易布局{布局分为左右两列排版}
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>
移动端瀑布流/信息流布局以及交互相关推荐
- 教你如何实现一个完美的移动端瀑布流组件（附源码）
背景 瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
- 【实战】1364- 实现一个完美的移动端瀑布流组件（附源码）
背景 瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
- 手把手教你写移动端瀑布流控件布局篇
1.了解每个平台的基础的布局控件: Android:FrameLayout,LinearLayout,AbsoluteLayout(已废弃) (http://developer.android.com ...
- html 手机端瀑布流,移动端 瀑布流布局
html {$item['teacher']} {$item['fl']} {$item['city']} js //重新定义瀑布流 window.onresize = function() { wa ...
- feed流和瀑布流_推荐系统之Feed流UI交互设计
前面几篇介绍了推荐系统相关的标签.画像.算法.策略,整体上看推荐系统是一个偏工程应用的领域,要想在商业产品中引入推荐系统,利用推荐系统来帮助用户过滤信息,除了构建精准高效的推荐算法外,还需要设计适合特 ...
- 《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果 前言 示例 WEB端示例 移动端示例 瀑布流实现 第一种: flex 核心代码 实现 缺点 完整代码 第二种:column-coun ...
- 什么是瀑布流布局？瀑布流式布局的优缺点
瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式. 视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部. 是一种多列等宽不等高的一种页面布局方 ...
- android 瀑布流 github,GitHub - coong4/android_waterfall: Android版的瀑布流布局
Android瀑布流实例 此项目由于最初设计问题,导致现在问题比较多,暂时停止维护. 我现在在其他类似的瀑布流上进行完善开发, ####请关注: 有必要解释一下程序为什么采用addview方式而不是做 ...
- 横向瀑布流android,GitHub - xinqing/android_waterfall: Android版的瀑布流布局
Android瀑布流实例 此项目由于最初设计问题,导致现在问题比较多,暂时停止维护. 我现在在其他类似的瀑布流上进行完善开发, ####请关注: 有必要解释一下程序为什么采用addview方式而不是做 ...
- uniapp开发：瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端
概要 支持的平台 使用方式 属性说明 事件说明 组件方法 refresh的使用示例 隐藏单项图片示例 完整示例 温馨提示 关注我,不迷路 概要 custom-waterfalls-flow是一个瀑布流 ...
最新文章
- 表单高级应用和语义化
- 转：SAP 零售业POS心得分享
- shujufenxi:一季度中国人每天存700亿元！“报复性存款”能带来消费吗？
- ibatis.net：第五天，QueryForObject
- .net 调用url接口_.NetCore中Quartz.NET的依赖注入
- 云化要求下，数据库架构如何演进？
- Python学习笔记（1）：用户输入，终端输入
- 关于C#监视剪贴板信息
- python实现一个小程序
- python聚类分析如何确定分类个数_R语言做聚类分析Kmeans时确定类的个数
- TensorFlow 学习（四）—— computation graph
- joomla 3.6 mysql 版本_Joomla是否支持MariaDB数据库？
- Delphi运行期错误
- easypoi的学习笔记
- hwd分别是长宽高_丰田重磅新RAV4荣放！不仅颜值高了 配置还再升级，仅18万
- linux 命令行下载bt,linux命令行下载BT种子和磁力链接
- 无锡工艺技术计算机信息管理论文,无锡工艺职业技术学院05／06学年第一学期.doc...
- fash 3D 游戏
- super 和 this
- 技校毕业是什么学历_技校毕业后是什么学历什么文凭?