首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    可拖拽列表实现

    需要做一个可复用的“网页可拖拽的列表排序”组件。从一开始,我就想:既要满足需求,高度封装;又得保证体验,视觉要足够现代精致。...,我把核心流程抽象成三步——初始化、拖拽交互、状态提交,并用下面这张流程图来梳理它们的协作关系: 当时在代码里,我先构建了一个 SortableList 类,负责把目标容器(ul、div 都可)变成“可拖拽的...为了未来还能扩展排序动画或同列表间拖拽,我把一些核心方法都挂在原型上,而非闭包里,这样便于继承与二次封装。...; border: 1px dashed var(--item-border); border-radius: 4px; } 接下来,我还给组件加了一个小优化:当拖拽到容器边缘时,自动滚动容器视图...这样,业务方拿到新的排序后,就能立刻发 API 或本地更新视图了。

    47910

    Django学习-第十二讲:视图高级(二)类视图、模板视图、列表视图、和分页

    类视图 在写视图的时候,Django除了使用函数作为视图,也可以使用类作为视图。使用类视图可以使用类的一些特性,比如继承等。...1.1 View django.views.generic.base.View是主要的类视图,所有的类视图都是继承自他。如果我们写自己的类视图,也可以继承自他。...在网站开发中,经常会出现需要列出某个表中的一些数据作为列表展示出来。比如文章列表,图书列表等等。在Django中可以使用ListView来帮我们快速实现这种需求。...model:重写model类属性,指定这个列表是给哪个模型的。 template_name:指定这个列表的模板。 paginate_by:指定这个列表一页中展示多少条数据。...context_object_name:指定这个列表模型在模板中的参数名称。- ordering:指定这个列表的排序方式。 page_kwarg:获取第几页的数据的参数名称。默认是page。

    1.6K20

    iOS实例——滑动列表展现隐藏顶部视图

    引 项目中需要一个效果:下滚列表时顶部的自定义视图不移动,上移时隐藏顶部视图,提高列表的展现范围。...在此基础上海加了一个隐藏列表时的动态渐入渐出效果,如下: 实现 实现的要点是,顶部的视图要随着列表的滚动而滚动,且列表最上是可以滚动到屏幕顶部的,最下就是滚动到一个固定的位置就不再往下滚动了,至于渐变效果只要能控制滚动自然也能控制随着滚动去改变...关键就在于顶部视图不是简单的放在列表之上,也不是简单的作为列表的headerview。...顶部视图确实是直接作为self.view的子视图来添加的,但是列表的范围同样是覆盖整个屏幕,那么为了避免列表内容被顶部视图盖住,就要设置列表的contentoffset值。...在处理方法中我们要做两件事,第一件事是让顶部视图的高度随着列表移动而移动,但是要控制列表最高移动到的位置TOP和最低移动到的位置BOTTOM,这其实就是顶部视图的低端对应的Y值。

    2.7K10

    iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)

    2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能:向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能:展开折叠视图:(包含上/下架商品功能) ? 竖向弹出菜单视图 弹出菜单:会员模块的右上角的下拉菜单(竖向) ?...I、 支持展开折叠的弹出菜单的实现思路 1.1将弹出视图添加到keyWindow,蒙版也添加到主窗口(主要原因是点击屏幕的空白处,需要隐藏弹出视图) #define kWindow [UIApplication...2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能:向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能:展开折叠视图:(包含上/下架商品功能) ?

    3.5K10

    在iOS中怎样创建可展开的Table View?(上)

    .这些视图控制器可以用在很多方面,例如,简单地显示某种信息在屏幕上,或者从用户的输入收集复杂的数据.为不同功能的app创建新的视图控制器经常是强制性的,并且好几次都是有点让人退缩的任务.然而,如果你只是使用可展开的...,创建可展开的tableView是一个不错的选择.使用可展开的tableView,在任何情况下,只是向用户请求已经存在的数据或是默认的视图控制器,而没必要创建新的视图控制器.例如,有了可展开的cell,...关于演示的app 通过实现一个包含tableView的视图控制器的app,我们将会看到可展开的tableView是如何创建和工作的.我们将会做一个假的表格让用户输入数据,为此,tableView将要包含下面三个组...所以,现在你知道我们最终的目标了,因此下面我们将要学习如何创建一个可展开的tableView.....属性列表如下: isExpandable:它是一个布尔值,表示一个cell是否可以展开.对于我们来说,在这篇教程中,它是最重要的属性之一. isExpanded:也是一个布尔值,表示一个可以展开的cell

    3K50

    可迭代对象 python_列表是可迭代对象吗

    time import sleep """ 如下为迭代的学习思路梳理: 后面是具体的代码实现,没有把每一个步骤都进行截图和代码分享,望谅解 (1)一个类中加入__iter__f (self) 方法后变成可迭代的...Stuends_iter(self) def __next__(self): # len_name = len(self.obj.nam) return self.obj.names[0] 传参的结果如下,已经能够成功打印列表中的第一个值...(6) 获取所有传递的列表的长度 len_name = len(self.obj.names) #获得了长度就可以用循环遍历了 (7)完成循环遍历,并且判断长度,存在问题,遍历结束后,仍没有退出 def...(6) 获取所有传递的列表的长度 len_name = len(self.obj.names) #获得了长度就可以用循环遍历了 (7)完成循环遍历,并且判断长度,存在问题,遍历结束后,仍没有退出 def...# return Stuends_iter(self) return self def __next__(self): # 具有本方法的对象是可迭代的,加上_

    1.8K50

    在iOS中怎样创建可展开的Table View?(下)

    接上篇:在iOS中怎样创建可展开的Table View?...,但是我们要将一步一步地走.现在我们已经有了点击行的真正索引,我们必须要检查cellDescriptors数组,指定的cell是否展开.某个cell是可展开的,但是现在还没有展开,那么我们要标示(我们将使用一个...UITableViewRowAnimation.Fade) } 在if case里,我们将执行诗歌不同的任务: 我们要找到那个被点击的顶级cell的行索引.事实上,我们会执行一个搜索指向cell描述符的起始位置,以及第一个顶层cell被发现是可展开的才是我们想要的...总结 正如我开始说的,创建可展开的tableView在某些时候真的很有用,从麻烦当中创建新的视图控制器,可以用这种tableView来处理,它可以为app节省时间.在这次教程先前的部分,我向你提出了一种创建可展开...(例如,将cell描述列表保存到文件),然而,那已经超出了我们的目标;我们最开始所想的是实现一个可展开的tableView,根据需求显示或隐藏cell,以及我们最终所做的.我相信,在这篇教程中你会找到左右有用的信息

    2.4K30

    【C语言】扫雷(可展开空白版与鼠标操作版)

    open(mine, show, i, j); } } } else { return; } } } open函数使用递归的方法进行每次查找到空白的时候展开周围不是雷的一片区域...对于递归地方的说明:如果该位置周围没有地雷且展示数组show的对应位置不是空格,那么将该位置的展示数组show的值设为空格,并遍历该位置周围的8个格子,对每个格子再次调用open函数,实现递归展开空白区域的功能...函数中 递归处的解读 //如果该位置周围没有地雷且展示数组show的对应位置不是空格, //那么将该位置的展示数组show的值设为空格,并遍历该位置周围的8个格子,对每个格子再次调用open函数,实现递归展开空白区域的功能...{ // 防止进入边框坐标 if (y + i >= 1 && y + i = 1 && x + j <= col) { // 数字展开时扫到雷...(show[y + i][x + j] == '*' && mine[y + i][x + j] == '1') { (*win) = -9; } // 数字展开扫到非雷

    35910

    在Swift中创建可缩放的图像视图

    在本教程中,我们将建立一个可缩放、可平移的图像视图来实现这一功能。 计划 他们说,一张图片胜过千言万语--但它不一定要花上一千行代码!对于我们的可缩放图像视图,我们要做的是让它成为一个可缩放的视图。...对于我们的可缩放图像视图,我们将利用UIScrollView的缩放和平移功能。...设置滚动视图 我们需要实际设置我们的滚动视图,使其可缩放和可平移。这包括设置最小和最大的缩放级别,以及指定用户放大时使用的UIView(在我们的例子中,它将是图像视图)。...medium.com/media/825ab… 双击手势(可选 可缩放视图的一个常见功能是双击放大和缩小的能力。这对我们的类来说是一个相对简单的补充,所以接下来让我们来添加这个功能。...这也不仅仅适用于图片视图--如果你想让UIView可缩放,你可以采取同样的方法,用UIView而不是图片名称初始化你的类。可以尝试一下!

    9.8K20

    Flask 学习-22.可插拨视图MethodView类

    前言 可插拨视图基于使用类来代替函数,其灵感来自于 Django 的通用视图。可插拨视图的主要用途是用可定制的、可插拨的视图来替代部分 实现。...基本原理 假设有一个函数用于从数据库中载入一个对象列表并在模板中渲染: @app.route('/users/') def show_users(page): users = User.query.all...但是如果要把这个视图变成一个可以用于其他模型和模板的通用视图, 那么这个视图还是不够灵活。因此,我们就需要引入可插拨的、基于类的视图。...例如,假设你需要这样使用一个 user 对象: URL 方法 说明 /users/ GET 给出一个包含所有用户的列表 /users/ POST 创建一个新用户 /users/ GET 显示一个用户 /...user_required(UserAPI.as_view('users')) app.add_url_rule('/users/', view_func=view) 自 Flask 0.8 版本开始,新加了一种选择:在视图类中定义装饰的列表

    97220
    领券