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

最新推荐文章于 2024-08-28 15:10:06 发布

竹叶轻拂水

最新推荐文章于 2024-08-28 15:10:06 发布

阅读量3.4k

点赞数 3

分类专栏：笔记微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/cbb_2313/article/details/119718771

版权

本文介绍了微信小程序中如何实现朋友圈的图片和视频展示形式，包括单张宽图、长图、多张图片以及视频的布局和处理方式。针对图片，通过判断其宽高比确定展示模式；对于视频，则通过监听加载完成事件获取尺寸。代码示例分别展示了WXML、JS和WXSS的部分实现。

摘要由CSDN通过智能技术生成

朋友圈图片展现形式：
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' : ''}}">
      <!-- 遍历 -->
      <!-- 在这里判断图片的数量是单站还是四张，分别给不同样式，来实现，一排是两张还是三张 -->
      <view
        wx:for="{
    {mediaList}}"
        wx:key="index"
        class="img_item {
    {mediaList.length == 1 ? 'one' : mediaList.length == 4 ? 'four' : 'many'}}"
      >
        <!-- item.type == 2 是视频 -->
        <!-- style 的 宽高是 视频标签 bindloadedmetadata="videometa" 方法里计算的宽高 -->
        <view
          class="video_box"
          wx:if="{
    {item.type == 2}}"
          style="width: {
       {
       width}}</