1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 小程序编写类似微信朋友圈九宫格布局

小程序编写类似微信朋友圈九宫格布局

时间:2018-12-16 03:06:01

相关推荐

小程序编写类似微信朋友圈九宫格布局

效果图(目前数据都是自己写死的数据 到时是根据api返回显示的)

总共分为 1张图 2张图 4张图 9张图 然后进行对应的样式布局
代码:
根据返回的数组长度进行判断 显示对应布局 例如 arr.length为9,那么就应该显示9宫格盒子布局 其它盒子不显示

<view class="picture_box"><!-- 单张图片 --><view class="picture_list" wx:if="{{picturelist.length<2}}"><!-- 单张图片展示 --><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image><!-- 单个视频展示 --><!-- <video src="http://static./video/1.mp4"></video> --></view><!-- 2张图片 --><view class="picture_list_two" wx:if="{{picturelist.length>1 && picturelist.length<3}}"><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view><!-- 4张图片 --><view class="picture_list_four" wx:if="{{picturelist.length>3 && picturelist.length<5}}"><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view><!-- 多张图片 --><view class="picture_list_N" wx:if="{{picturelist.length>5}}"><image mode="aspectFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view></view>

目前项目有需求 我是这样写的 感觉还行吧 也可能有更好的方式~就是不知道 哈哈

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。