用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

7

主题

53

帖子

1348

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1348
2016-11-28 19:34:10 空白后的寂静优秀会员纪念 版主 楼主 166308
只是简单的实现了左滑功能,和瀑布流的布局。如有不明白之处,或者有bug之处请在下方回帖说明!!

Ps:仅供参考!!
1.png 2.png

实例代码:
[AppleScript] 纯文本查看 复制代码
Page({
    data: {
        images: [{ pic: "../../images/1.png", height: 0 }, { pic: "../../images/2.png", height: 0 }, { pic: "../../images/3.png", height: 0 }, { pic: "../../images/4.png", height: 0 }, { pic: "../../images/5.png", height: 0 },{ pic: "../../images/1.png", height: 0 }, { pic: "../../images/2.png", height: 0 },],
        scroll_H: 0,
        imgWidth: 0,
        oneimages: [],
        twoimages: [],
        oImageIndex: []
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                console.log(res);
                var _width = res.windowWidth;
                var imgWidth = _width * 0.48; //样式表里面设置的宽度
                var scroll_H = res.windowHeight * (750 / res.windowWidth);
                that.setData({
                    scroll_H: scroll_H,
                    imgWidth: imgWidth
                })
            }
        })

        var images = this.data.images;
        var oImageIndex = [];//把数组下标存入临时对象中
        for (var i = 0; i < images.length; i++) {
            oImageIndex.push(i);

        }

        this.setData({
            oImageIndex: oImageIndex
        })
    },
    onReady: function () {
        // 页面渲染完成

    },
    onShow: function () {
        // 页面显示

    },
    onHide: function () {
        // 页面隐藏

    },
    onUnload: function () {
        // 页面关闭

    },
    loadimg: function (e) {//图片加载完成执行
        var index = e.currentTarget.id;
        console.log(index)
        var oImageIndex = this.data.oImageIndex;
        var tempIndex = 0;
        for (var i = 0; i < oImageIndex.length; i++) {
            if (oImageIndex[i] == index) {
                tempIndex = i;
                break;
            }
        }
        var imgWidth = this.data.imgWidth;//图片设置的宽度
        var oImgW = e.detail.width;//图片原始宽度
        var scal = imgWidth / oImgW;//比例计算
        var oImgH = e.detail.height;//图片原始高度
        var _imgHeight = oImgH * scal;//自适应高度
        var images = this.data.images;
        images[index].height = _imgHeight;
        oImageIndex.splice(tempIndex, 1);
        this.setData({
            oImageIndex: oImageIndex,
            images: images
        })

        var oneimages = this.data.oneimages;
        var twoimages = this.data.twoimages;
        if (oImageIndex.length == 0) { //当加载完最后一张图片执行
            var oneImageH = 0;
            var twoImageH = 0;
            for (var i = 0; i < images.length; i++) {
                if (i > 0) { //第一张除外
                    if (oneImageH > twoImageH) {
                        twoImageH += images[i].height;
                        twoimages.push(images[i]);
                    } else {
                        oneImageH += images[i].height;
                        oneimages.push(images[i]);
                    }
                } else {
                    oneImageH += images[i].height;
                    oneimages.push(images[i])
                }
            }
        }

        this.setData({
            oneimages: oneimages,
            twoimages: twoimages
        })
    }
})

[HTML] 纯文本查看 复制代码
<scroll-view  scroll-y="true" style="height:{{scroll_H}}rpx">
<view style="height:0;overflow:hidden">
         <view wx:for="{{images}}" wx:key="index">
                 <image id="{{index}}" src="{{item.pic}}" data-item="1" bindload="loadimg" ></image>
         </view>
</view>
<view style="width:100%">
        <view class="img_item">
         <view wx:for="{{oneimages}}" wx:key="index" >
                 <image  id="{{index}}" src="{{item.pic}}" data-item="1" style="width:100%;height:{{item.height}}px"></image>
         </view>
        </view>
        <view class="img_item">
                <view wx:for="{{twoimages}}" wx:key="index">
                        <image id="{{index}}" src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
                </view>
        
        </view>
</view>

</scroll-view>


文件下载:
falls-view.rar (1.55 MB, 下载次数: 659)

评分

参与人数 2原创 +2 浮云 +40 收起 理由
jsh5css + 1 + 20 很给力!
skyvow + 1 + 20

查看全部评分

我来组成头部,占据沙发位置俯瞰楼主,
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2016-11-29 09:41:09 jsh5css原创达人 优秀会员纪念 开发者认证 版主
板凳
厉害了,支持原创,期待更多优秀组件
程序学习,瀑布流
2016-11-29 18:07:22 Hiamigo 架构狮
5#
我的代码就这么给我放上来了??
2016-11-30 17:14:49 finderown 架构狮
6#
不错不错
ffffffffff
谢谢分享
瀑布流布局
2016-12-5 09:56:42 千寻 攻城狮
10#
fasdasdascdas
左侧滑动
2016-12-6 14:38:34 夜空 攻城狮
12#
我来组成腿部,占据地板位置俯瞰楼主,
2016-12-6 15:04:50 keep 架构狮
13#
哎呦  不错哟  看一看瞧一瞧
看看  学习学习
2016-12-7 11:17:29 webkf 架构狮
15#
哈哈哈哈哈哈或
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册