精华内容
下载资源
问答
  • 这是基于Qt实现的自定义滑动选择器滑动选择器支持两种模式:水平模式和垂直模式,可自行设置。另外提供了接口可设置各类颜色、选择器值域等。
  • 主要为大家详细介绍了WheelView实现上下滑动选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • MBScaleplateSlider:iOS仿标尺 Slider滑动选择器
  • 本文介绍了微信小程序滑动选择器的实现代码,分享给大家,具体如下: 实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,...
  • iOS 弹出滑动选择器.zip,A more convenient way to display a popover with a built-in picker, on iPhone/iPad of iOS9 .
  • UITableView UICollectionView 实现的二维滑动选择器
  • uniapp滑动选择器 slider

    2020-08-13 09:57:40
    滑动选择器 slider 属性说明 min: 最小值 max: 最大值 step: 步长, 取值必须大于0, 并且可被(max - min)整除 disabled: 是否禁用 value: 当前取值 activeColor: 滑块左侧已选择部分的线条颜色 backgroundColor: ...

    滑动选择器 slider

    属性说明

    1. min: 最小值
    2. max: 最大值
    3. step: 步长, 取值必须大于0, 并且可被(max - min)整除
    4. disabled: 是否禁用
    5. value: 当前取值
    6. activeColor: 滑块左侧已选择部分的线条颜色
    7. backgroundColor: 滑块右侧背景条的颜色
    8. block-size: 滑块的大小, 取值范围为12 - 28
    9. block-color: 滑块的颜色
    10. show-value: 是否显示当前value
    11. @change: 完成一次拖动后触发的事件
    12. @changeing: 拖动过程中触发的事件
    <view>
        <slider @change="slider" value="10" show-value="true"/>
    </view>
    

    在这里插入图片描述

    展开全文
  • vue滑动选择器(一键开启时间选择器)

    千次阅读 2019-06-06 14:59:23
    vue滑动选择器(一键开启时间选择器) 直接上demo npm i time_check_jiangji 之后直接用 <template> <div class="A"> <div @click="showFn">开</div> <Time v-if="show" :arr=...

    vue滑动选择器(一键开启时间选择器)

    一个vue的滑动选择器(移动端和PC端都能使用)

    先来张效果图

    1

    安装 npm install time_check_jiangji

    引入 import Time from ‘time_check_jiangji’

    直接上干货,demo

    <template>
      <div class="App">
        <div @click="timeShow = true">点击显示Time组件</div>
        <Time v-if="timeShow" :cancleFn="cancleFn" :time="true" :defaultValue="[2019, 6, 5, '上午', '随便2']"  :arr="[['上午', '下午'], ['随便1', '随便2']]" @click="clickFn" :arrayFirstdayAndLastday="['2012.6.8', '2019.6.10']" :stylBtn="{'color': '#00ffff'}" />
      </div>
    </template>
    
    <script>
    import Time from 'time_check_jiangji'
    export default {
      name: 'App',
      components: {
        Time
      },
      data() {
        return {
          timeShow: true
        };
      },
      methods: {
        clickFn (e) {
          console.log(e)
          this.timeShow = false
        },
        cancleFn () {
          console.log('取消')
          this.timeShow = false
        }
      }
    };
    </script>
    

    下面再来一个说明

    @click="clickFn"
    是点击确认按钮的触发的函数 接受一个参数(数组类型),是当前的值
    (例如[2019, 6, 5, "上午", "随便2"])
    
    :cancleFn="cancleFn"  (特别注意,是:cancleFn不是@cancleFn,是: 不是@)
    是点击取消按钮触发的函数,不传则不显示取消按钮(非必传)
    
    :defaultValue="[2019, 6, 5, "上午", "随便2"]"
    是回显值(一维数组,非必传,传了能回显)  数据类型注意要对应上
    
    :time="true"
    开启年月日的时间选择模式(只能选择三年内的日期,非必传)
    
    :arr="[['上午', '下午'], ['随便1', '随便2']]"
    传入二维数组(非必传)
    如果:time="true" 那么前三列是时间(年月日),第四列是['上午', '下午'],第五列是['随便1', '随便2']
    如果:time="false"或者未传, 第1列是['上午', '下午'],第2列是['随便1', '随便2']
    
    :arrayFirstdayAndLastday="['2016.6-8', '2019-6.10']" (日期用逗号(.)或者一杠(-)隔开都行)
    arrayFirstdayAndLastday是一维数组,数组长度必须是2,数组长度必须是2,数组长度必须是2
    第一项是最早的显示时间,第二项是最晚的显示时间
    ['2016.6.8', '2019.6.10'] 那么最早显示时间是201668号,最晚时间是2019610:stylBtn="{'color': '#00ffff'}"
    是按钮这一栏的行内样式
    
    

    附上github地址 https://github.com/jiangji1/time_check_jiangji

    展开全文
  • ios 横向滑动选择器 年份+月份
  • 这是基于Qt实现的自定义滑动选择器滑动选择器支持两种模式:水平模式和垂直模式,可自行设置。另外提供了接口可设置各类颜色、选择器值域等。 在这里提供了下载链接。 二、效果展示 三、控件分析 滑动选择器,...

    一、前言

    这是基于Qt实现的自定义滑动选择器,滑动选择器支持两种模式:水平模式和垂直模式,可自行设置。另外提供了接口可设置各类颜色、选择器值域等。

    在这里提供了下载链接


    二、效果展示

    在这里插入图片描述


    三、控件分析

    滑动选择器,是一个可以在通过控件上左右滑动,然后左右两侧数据会随之左右滚动并标记(颜色突出)出当前值,来进行选择值的一个控件。我们可以把它拆分为三部分:背景框、分隔线、数字,所以我们可以把绘制过程分为三部分,绘制背景框、绘制分割线、绘制数字。


    四、原理详解

    在绘制完画面之后,怎么来实现它的滑动是本控件的关键之处。由于本滑动选择器支持水平模式和垂直模式,在此以水平模式为例进行讲解。要实现滑动,我们需要重写鼠标点击和鼠标移动事件。在鼠标点下时,记录鼠标当前点击处的x坐标(垂直模式则记录鼠标当前点击处的y坐标)。当鼠标移动时,我们先要判断当前值是否超过了值域范围。当前值等于最小值了并且鼠标还在往右边滑动,则return;当前值等于最大值并且鼠标还在往左滑,则return。然后我们需要实时计算出鼠标移动的距离,最后更新绘图。更新绘图时,显然背景框和分割线是不会发生改变的,只有数字会发送改变。所以只要绘制数字的矩形框的横坐标跟我们的鼠标移动距离进行绑定(数字的绘制会参考鼠标的移动距离),那么我们滑动,字体就会随之滑动。

    按造以上已经基本能实现简易的滑动选择器,但是它还不够丝滑(当鼠标移动完释放,数字移动会立刻停止,可能下一个数字还没到当前位置就停止了,然后就会出现两个数字同框的局面),所以我们要想办法,让它在鼠标释放时根据移动距离进行数据矫正,把数值矫正到中心位置。要实现这个功能,需要使用到QPropertyAnimation类,首先我们给类添加一个属性,将鼠标移动距离这个值暴露出来,然后将这个属性名与QPropertyAnimation绑定。如果当前值向右移动超过了半个字,则切换到下一个字;如果未超过则当前值直接回滚到中心位置;如果当前值向左移动超过了半个字,则切换到上一个字。

    五、关键代码

    void SlidingSelector::paintEvent(QPaintEvent *)
    {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing, true);
    
        paint_frame(&painter);
        paint_parting_line(&painter);
    
        int Width = width()-1;
        int Height = height()-1;
    
        if(mode == Horizontal)
        {
            if(mouse_move_length >= Width/4 && Current_num > MIN_NUM)
            {
                mouse_Press += Width/4;
                mouse_move_length -= Width/4;
                Current_num -= 1;
            }
            if(mouse_move_length <= -Width/4 && Current_num < MAX_NUM)
            {
                mouse_Press -= Width/4;
                mouse_move_length += Width/4;
                Current_num += 1;
            }
    
            //中间数字
            paint_num(&painter,Current_num,mouse_move_length,1);
    
            //两侧数字1
            if(Current_num != MIN_NUM)
                paint_num(&painter,Current_num-1,mouse_move_length-Width/4,0);
            if(Current_num != MAX_NUM)
                paint_num(&painter,Current_num+1,mouse_move_length+Width/4,0);
    
            //两侧数字2,超出则不显示
            if(mouse_move_length >= 0 && Current_num-2 >= MIN_NUM)
                paint_num(&painter,Current_num-2,mouse_move_length-Width/2,0);
            if(mouse_move_length <= 0 && Current_num+2 <= MAX_NUM)
                paint_num(&painter,Current_num+2,mouse_move_length+Width/2,0);
        }
        else
        {
            if(mouse_move_length >= Height/4 && Current_num > MIN_NUM)
            {
                mouse_Press += Height/4;
                mouse_move_length -= Height/4;
                Current_num -= 1;
            }
            if(mouse_move_length <= -Height/4 && Current_num < MAX_NUM)
            {
                mouse_Press -= Height/4;
                mouse_move_length += Height/4;
                Current_num += 1;
            }
    
            //中间数字
            paint_num(&painter,Current_num,mouse_move_length,1);
    
            //上下数字1
            if(Current_num != MIN_NUM)
                paint_num(&painter,Current_num-1,mouse_move_length-Height/4,0);
            if(Current_num != MAX_NUM)
                paint_num(&painter,Current_num+1,mouse_move_length+Height/4,0);
    
            //上下数字2,超出则不显示
            if(mouse_move_length >= 0 && Current_num-2 >= MIN_NUM)
                paint_num(&painter,Current_num-2,mouse_move_length-Height/2,0);
            if(mouse_move_length <= 0 && Current_num+2 <= MAX_NUM)
                paint_num(&painter,Current_num+2,mouse_move_length+Height/2,0);
        }
    
    }
    
    void SlidingSelector::paint_frame(QPainter *painter)
    {
        painter->save();
    
        painter->setPen(Qt::NoPen);
        painter->setBrush(frame_color);
    
        painter->drawRect(space,space,width()-space*2,height()-space*2);
    
        painter->restore();
    }
    
    void SlidingSelector::paint_num(QPainter *painter,int num,int mouse_move_length,int mid)
    {
        painter->save();
    
        int Width = width()-1;
        int Height = height()-1;
    
        if(mode == Horizontal)
        {
            int size = qAbs((Width - qAbs(mouse_move_length))/num_size);//像素尺寸
            int width = Width/2-3*qAbs(mouse_move_length);//数字框宽度
            int x = Width/2+mouse_move_length-width/2;//数字框x坐标
    
            QFont font;
            font.setPixelSize(size);
            painter->setFont(font);
            if(mid == 1)
                painter->setPen(currentNum_color);
            else
                painter->setPen(besideNum_color);
    
            painter->drawText(QRectF(x,0,width,Height),Qt::AlignCenter,QString::number(num));
        }
        else
        {
            int size = qAbs((Height - qAbs(mouse_move_length))/num_size);//像素尺寸
            int height = Height/2-3*qAbs(mouse_move_length);//数字框宽度
            int y = Height/2+mouse_move_length-height/2;//数字框x坐标
    
            QFont font;
            font.setPixelSize(size);
            painter->setFont(font);
            if(mid == 1)
                painter->setPen(currentNum_color);
            else
                painter->setPen(besideNum_color);
    
            painter->drawText(QRectF(0,y,Width,height),Qt::AlignCenter,QString::number(num));
        }
    
        painter->restore();
    
    }
    
    void SlidingSelector::paint_parting_line(QPainter *painter)
    {
        painter->save();
    
        QPen pen;
        pen.setBrush(partingLine_color);
        pen.setWidth(4);
        pen.setCapStyle(Qt::RoundCap);
        pen.setStyle(Qt::SolidLine);
        painter->setPen(pen);
    
        if(mode == Horizontal)
        {
            int up_down_space=height()/10;
            QPoint line_left_up=QPoint(space+(width()-space*2)/3,space+up_down_space);
            QPoint line_left_down=QPoint(space+(width()-space*2)/3,height()-space-up_down_space);
            QPoint line_right_up=QPoint(space+((width()-space*2)/3)*2,space+up_down_space);
            QPoint line_right_down=QPoint(space+((width()-space*2)/3)*2,height()-space-up_down_space);
            painter->drawLine(line_left_up,line_left_down);//绘制左侧分割线
            painter->drawLine(line_right_up,line_right_down);//绘制右侧分割线
        }
        else
        {
            int up_down_space=width()/10;
            QPoint line_left_up=QPoint(space+up_down_space,space+(height()-space*2)/3);
            QPoint line_left_down=QPoint(space+(width()-space*2)-up_down_space,space+(height()-space*2)/3);
            QPoint line_right_up=QPoint(space+up_down_space,space+((height()-space*2)/3)*2);
            QPoint line_right_down=QPoint(space+(width()-space*2)-up_down_space,space+((height()-space*2)/3)*2);
            painter->drawLine(line_left_up,line_left_down);//绘制左侧分割线
            painter->drawLine(line_right_up,line_right_down);//绘制右侧分割线
        }
    
        painter->restore();
    
    }
    
    展开全文
  • 这是基于Qt实现的自定义滑动选择器滑动选择器支持两种模式:水平模式和垂直模式,可自行设置。另外提供了接口可设置各类颜色、选择器值域等。 直接提供下载QT数字滚动选择.zip

    这是基于Qt实现的自定义滑动选择器,滑动选择器支持两种模式:水平模式和垂直模式,可自行设置。另外提供了接口可设置各类颜色、选择器值域等。

    直接提供下载QT数字滚动选择.zip

    展开全文
  • 滑动选择器在手机端是一个比较常见的组件,主要用于多数据情况下的选择。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。掌握基础的动态面板知识。本教程知识点进阶的动态面板使用。基础函数应用。基础中继...
  • Android案例页面底部弹框PopupWindow+竖直滑动选择器WheelView的实现
  • Qt自定义控件--滑动选择器

    千次阅读 热门讨论 2019-03-15 16:30:41
    Qt自定义控件--滑动选择器 滑动选择器为飞机仪表盘的一部分 代码借鉴:https://blog.csdn.net/big_c_god/article/details/52452631 在此基础上模仿:https://www.cnblogs.com/feiyangqingyun/p/6128288.html ...
  • 用对话框Dialog,实现从底部弹出一个滑动选择器,代码简单易懂,可直接用。。
  • 仿ios滑动选择器亲测好用(推荐)
  • [Android]竖直滑动选择器WheelView的实现,效果类似android4.0以上原生的DatePicker这种,可以实现自定义的字符串数组竖直滑动显示
  • Android实现自定义滑动选择器

    千次阅读 2018-04-13 09:44:52
    自定义一个滑动选择器首先需要自定义一个Java类,在这里将其命名为TestScroller,让其继承View,实现所有的构造函数,如下图public class TestScroller extends View{ public TestScroller(Context context) { ...
  • 滑动选择器在手机端是一个比较常见的组件,主要用于多数据情况下的选择。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。掌握基础的动态面板知识。本教程知识点进阶的动态面板使用。基础函数应用。基础...
  • 用对话框Dialog和Wheel组件,实现从底部弹出一个滑动选择器,代码简单易懂,可直接用。。
  • // 时间轴滑动选择器 dataZoom: [ { type: 'slider' } ], // x轴 xAxis: { data: [] },
  • 一个实现Android自定义滑动选择的简单Demo,简单、可读性强,但只有简单的注释
  • 仿Iphone实现滑动选择器

    千次下载 热门讨论 2015-05-22 21:04:01
    用于用户滑动选择,可以用于下拉列框,炫酷选择
  • 位于屏幕下方的上下对话框数据选择器,选择内容可自定义,比其他的wheelview 好看多了;分数太高了,CSDN自己加上去的,重新设置下分数
  • QT滚动数字 滚动选择器 滑动选择器

    千次阅读 2020-03-26 21:47:02
    最近在做个小软件,用到定时提醒功能,定时选择时间的时候我想到了锤子手机的闹钟设置界面,当然这种数字滚动选择器也是很常见啦,类似下面的效果 参考了 ...
  • 实现性别、日期等一些滑动选择的功能
  • slider滑动选择器

    2019-09-12 17:58:18
    属性 类型 默认值 说明 Min Number 0 最小值 Max Number 100 最大值 Step Number 1 步长,取值必须大于0,并且可被(max-min)整除 disabled Boolean false 是否禁用 ...已选择的颜色 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,225
精华内容 490
关键字:

滑动选择器