微信小程序实现朋友圈图片展现形式

朋友圈图片展现形式：
1、一张宽图：宽度100%，高度自适应
2、一张长图：高度全部展示，有最大高度，宽度自适应
3、多张图片：除去一张，两张和四张的时候是一排两张，其他都是一排三张，依次向后累加
4、视频：宽度是屏幕宽度的一半，高度自适应（视频的展现形式可能和朋友圈有些出入）

实现思路：
1、判断遍历对象是图片是视频，分别展示不同view
2、视频：为视频绑定加载完成事件bindloadedmetadata=“videometa”，在videometa方法中获取视频的宽高，并setData双向绑定在视频标签上
3、图片：
3.1、单张图片：为图片绑定加载完成事件bindload=“oneImageLoad”，在oneImageLoad中获取图片宽高，判断宽高大小来区别是长图还是宽图，并返回状态值isHeightMode，在图片标签中用isHeightMode 来决定图片的mode是widthFix还是heightFix，如果是长图HeightFix模式的时候，要给定图片最大高度
3.2、多张图片，一律都是mode=“aspectFill”，在css样式中编写顶宽定高，一排显示几张

下面只展示图片视频相关代码：
wxml：

  <!-- 图片和视频 --><view class="img_box"><view class="{{mediaList.length > 1 ? 'many_img' : ''}}"><!-- 遍历 --><!-- 在这里判断图片的数量是单站还是四张，分别给不同样式，来实现，一排是两张还是三张 --><viewwx:for="{{mediaList}}"wx:key="index"class="img_item {{mediaList.length == 1 ? 'one' : mediaList.length == 4 ? 'four' : 'many'}}"><!-- item.type == 2 是视频 --><!-- style 的 宽高是 视频标签 bindloadedmetadata="videometa" 方法里计算的宽高 --><viewclass="video_box"wx:if="{{item.type == 2}}"style="width: {{width}}rpx;height: {{height}}rpx;"><viewclass="video_marks"catchtap="previewImage"data-index="{{index}}"data-sources="{{mediaList}}"></view><videoclass="video"src="{{item.url}}"bindloadedmetadata="videometa"controls="{{false}}"></video></view><!-- 不是 item.type == 2 就是图片 else --><block wx:else><!-- 如果只有一张图片 bindload="oneImageLoad" 获取图片宽高，并计算宽高比，来判断图片的 mode 是 widthFix 还是 heightFix --><imagewx:if="{{mediaList.length == 1}}"class="img"bindtap="previewImage"bindload="oneImageLoad"src="{{item.url}}"data-sources="{{mediaList}}"data-index="{{index}}"mode="{{isHeightMode ? 'heightFix' : 'widthFix'}}"style="height: {{isHeightMode ? '500rpx' : ''}}"></image><!-- 多张图片 一律使用 aspectFill 并固定宽高 --><imagewx:elseclass="img"src="{{item.url}}"bindtap="previewImage"data-sources="{{mediaList}}"data-index="{{index}}"mode="aspectFill"></image></block></view></view></view>

js：

    // 预览图片previewImage(e) {let {sources, index} = e.currentTarget.datasetsources.filter(i => {i.type = i.type == 2 ? 'video' : 'image'i.poster = i.imgUrl})wx.previewMedia({sources,current: index})},// 视频加载完成，改变视频的宽高videometa(e) {var that = this;//获取系统信息wx.getSystemInfo({success (res) {//视频的高var height = e.detail.height;//视频的宽var width = e.detail.width;//算出视频的比例var proportion = height / width;//res.windowWidth为手机屏幕的宽。var windowWidth = res.windowWidth;//算出当前宽度下高度的数值height = proportion * windowWidth;that.setData({height,width:windowWidth});}})},// 图片加载后判断图片宽高比例oneImageLoad(e) {const { width , height } = e.detailheight >= width && this.setData({ isHeightMode: true })}

wxss：

.guidebook .img_box {margin-bottom: 12rpx;padding-left: 4rpx;
}
.guidebook .img_box .many_img {display: flex;justify-self: start;flex-wrap: wrap;
}
.guidebook .img_item.four {width: 198rpx;height: 198rpx;margin-right: 16rpx;margin-bottom: 16rpx;border-radius: 16rpx;overflow: hidden;
}
.guidebook .img_item.four:nth-child(2n) {margin-right: 30rpx;
}
.guidebook .img_item.many {width: 198rpx;height: 198rpx;margin-right: 16rpx;margin-bottom: 16rpx;border-radius: 16rpx;overflow: hidden;
}
.guidebook .img_item.many:nth-child(3n) {margin-right: 0;
}

微信小程序实现朋友圈图片展现形式相关推荐

微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...
微信小程序仿朋友圈上传图片到服务器，后端通过C#实现
现在微信小程序拍照上传的需求越来越多了,绝大部分小程序项目都会用到,虽然技术上没什么难度,但对于初学者来说,也是件费时费力的事情,三年前我在写这些代码的时候也是花费好几天的时间,最近有点空闲时间,于是 ...
微信小程序引爆朋友圈的秘密
昨天,也就是2017年1月9日,微信上线重磅功能"小程序",一时间刷爆了朋友圏.从来没有一款产品像"微信"一样如此引人注目,从来没有一个应用像"小程序 ...
微信小程序：朋友圈发圈助手文案,头像,壁纸组合
这是一款微信朋友圈助手的一款小程序源码内包含了朋友圈文案,壁纸,头像等等每一个都包含了多个大分类比如发圈助手有正能量,节假日祝福,搞笑段子等等壁纸和头像自然也会有不同的分类,具体大家可以看演示 ...
最新微信小程序分享朋友圈
微信小程序分享朋友圈近日,微信小程序官方文档更新 wx.showShareMenu(Object object),其中显示小程序可以分享到朋友圈啦! 但是,设置分享朋友圈的前提是必须同时设置发生给朋 ...
微信小程序分享朋友圈官方支持哪些方面（最新版本）
微信小程序分享朋友圈官方支持哪些方面? 1.微信小程序分享朋友圈支持单页模式,具体单页模式的详细说明可参考官方文档,文档链接为:微信小程序单页模式 2. 微信小程序分享朋友圈如果是自定义页面路径的话, ...
朋友圈计算机代码,微信小程序仿朋友圈代码
[实例简介] 微信小程序实现朋友圈页面.UGC发布,包含获取用户授权信息. [实例截图] [核心代码] circle ├── circle │ ├── app.js │ ├── app.jso ...
【微信小程序】微信小程序分享朋友圈教程
安卓的朋友们福利来了,微信小程序现支持安卓的朋友们分享小程序到朋友圈了! 下面我们来看下具体操作,如何实现小程序分享朋友圈的! 效果图点击朋友圈的链接即可进入一个微信原生的H5页面去展示所分享的小程 ...
微信小程序分享朋友圈功能
微信小程序分享到朋友圈的功能,终于实现了!但是只能是点击右上角菜单方式分享!话不多说直接上代码! js Page({onLoad: function (options) {if(options.in ...

微信小程序实现朋友圈图片展现形式

微信小程序实现朋友圈图片展现形式相关推荐

最新文章

热门文章