用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

1

主題

3

帖子

15

積分

新手上路

Rank: 1

積分
15
mini-color-picker

小程序拾色器(顏色選擇器)組件,通過調色盤取色,用于用戶自定義場景。

對比:

  • we-color-picker需注意組件定位,操作不跟手不流暢,配置復雜。其定位會撐開原有頁面,體驗不佳。滑動距離按像素區分(固定),需考慮設備分辨率,不利于多端。
  • PapaerPen利用原有slider組件實現滑動選取,不限于設備分辨率。但需三次操作。

特性:

本組件利用官方提供的slider實現選擇色相,movable-view選擇飽和度和明度,由于是官方基礎組件,操作順暢。在滑動區域的設定上,使用占比來影響色值變化,無需考慮rpx轉換。在操作流程上,限于手機操作區域,不能使用Popover,使用底部拉起彈窗,不影響原有頁面,重點突出。在操作預覽上,由于彈窗遮罩不可避免無法實時預覽,采用色相滑塊的顏色來實現預覽。同時考慮了iphone-x的安全區域問題。

使用效果截圖

樣例

在開發者工具中預覽效果=>代碼片段ID:GcP4LBmv77h6

微信搜索選色器安裝使用1. 獲取組件git

可能不穩定,但包含最新功能更新

git clone https://github.com/MakerGYT/mini-color-picker.git

將項目中components/color-picker文件夾拷貝到組件路徑下

npm

穩定

npm install mini-color-picker --save

使用npm包請參考微信小程序官方文檔

2. 引入組件

在使用該組件的頁面對應json文件中添加:

{
  "usingComponents": {
    "color-picker":"/components/color-picker/color-picker"
  }
}

如使用npm,點擊開發者工具中的菜單欄:工具 --> 構建 npm;勾選“使用 npm 模塊”選項

{
  "usingComponents": {
    "color-picker":"mini-color-picker/color-picker"
  }
}
3. 使用組件

參考/pages

<!-- index.wxml -->
<view style="background:{{rgb}};width:100px;height:24px;" bindtap="toPick"></view>
<color-picker bindchangeColor="pickColor" initColor="{{rgb}}" show="{{pick}}" />
Page({
  data:{
    rgb: 'rgb(0,154,97)',//初始值
    pick: false
  },
  // 顯示取色器
  toPick: function () {
    this.setData({
      pick: true
    })
  },
  //取色結果回調
  pickColor(e) {
    let rgb = e.detail.color;
  },
})
屬性列表
屬性
類型
默認值
必填
說明

showBooleanfalse是是否顯示
initColorStringrgb(255,0,0)是初始色,rgb表示
maskBooleantrue否是否顯示背景蒙層
maskClosableBooleantrue否點擊背景蒙層是否可以關閉
bindchangeColoreventhandler否取色后的回調,event.detail = {color}
bindcloseeventhandler否點擊背景蒙層關閉掉color-picker后觸發的事件

注意:

外部與組件通信的數據格式是rgb,為了避免引入多種數據格式而導致實際場景代碼冗余,開發者可自行按需轉換,在公眾號"MakerGYT"回復以下對應內容獲取參考函數代碼:

  • rgb2hex
  • rgb2hsv
  • rgb2cmyk
  • hex2rgb
  • hsv2rgb
MakerGYT公眾號License

MIT ? MakerGYT


分享至 : QQ空間
0 人收藏
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
河北20选5大星走势图 贵州十一选五开奖结果果一定牛 股票投资公司 上海体彩十一选五攻略 湖北快3走势图 基本 上海时时乐实体店 免费股票推荐网 上海十一选五一定牛 天津快乐十分合买 上海 期货 配资 网上购买彩票首选 一分彩人工精准计划软件 山东体彩11选5开奖结果 吉林十一选五开奖一定牛近期一百期 排列三字谜汇总 河南十一选五走势图带连线 场外配资找久联优配