评论：移动端上滑显示更多内容，类似高德地图首页(原创)  [查看原文]

所属分类：输入-拖和放

 16647  176  9
当前第1页 / 共1页
    异乡人丶0
    2023/4/6 17:47:06
    我需要在 contBox 盒子里面加一个按钮一直固定显示在这个盒子顶部位置 应该怎么弄？
        土豆同学1
        2023/4/6 18:54:44

        contBox里面的内容改成这样：

        <div id="contBox">
    <div style="height: 50px; position: absolute; top: 0; left: 0;">固定的内容</div>
    <div style=" position: absolute; top: 50px; bottom: 0; left: 0; width: 100%; overflow: auto;">
        <!--这里放任何想放的内容-->
        <div style="height: 150px;background: red;">上滑这个红色块试试</div>
        <div style="height: 150px;background: orange;"></div>
        <div style="height: 150px;background: yellow;"></div>
        <div style="height: 150px;background: green;"></div>
        <div style="height: 150px;background: blue;"></div>
        <div style="height: 150px;background: purple;"></div>
    </div>
</div>
        ten170
        2023/12/7 16:48:21
        如果想让固定的内容比下面的元素慢一点滑动，达到一个层级效果，怎么加过渡呀
    回复
    陌雨凉19900
    2022/9/26 14:07:28
    里面放个iframe就不行了 回复
    独家记忆1
    2019/12/26 11:19:09
    找到问题了，初次点击的时候松开鼠标，在touchend方法里这个 this.direction 是undefined，就执行了后面的this.top;就默认打开了，等到上滑再收回去，他就有了一个toBottom的值，就会执行this.bottom，再点击就不会默认打开了，我就在init的时候加了一个属性，this.direction = 'tobottom'
        清风自来0
        2020/6/9 10:22:14
        能把具体的代码截个图嘛~
        朝阳?1
        2021/12/3 17:32:03

        我在touchend中加了个判断

        touchend: function(e) {
    var _this = this;
    if (this.state == "scroll") {
        return;
    }
    this.y = this.direction == "toBottom" ? this.bottom : this.top;
    this.height = this.h - this.y;
    this.opacity = this.direction == "toBottom" ? 0 : this.opacityMax;
    this.setDom("end");

    // 加了个判断
    if (!this.direction) {
        this.direction = "toBottom"
        this.contEl.style.overflow = "auto";
    } else if (this.direction == "toBottom") {
        this.direction = "toTop"
    } else {
        this.direction = "toBottom"
        this.contEl.style.overflow = "auto";
    }
    // end

    this.ifTouch = false;
},
    回复
    独家记忆0
    2019/12/25 10:42:07
    第一次点击的时候为什么会上去，收下去之后再点击，就不会上滑了，没有拖拽，只是点击 回复
    黄河爱浪0
    2019/10/20 16:22:15

讨论这个项目（9）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复