fpicker

picker组件,最多三列,可简单定制外观

API

  1. 注意:setCount必须第一个调用,以初始化picker
  2. 设置picker有几列
  3. /**
  4. * @param count 列数
  5. */
  6. setCount(count)
  7. 设置第一列的数据
  8. /**
  9. * @param list 数据
  10. */
  11. setItems1(list)
  12. 设置第二列的数据
  13. /**
  14. * @param list 数据
  15. */
  16. setItems2(list)
  17. 设置第三列的数据
  18. /**
  19. * @param list 数据
  20. */
  21. setItems3(list)
  22. 设置主题色
  23. /**
  24. * @param bgcolor 背景色
  25. * @param btncolor 按钮文字颜色
  26. */
  27. setTheme( bgcolor, btncolor)
  28. /*
  29. * 显示picker
  30. */
  31. show()
  32. 用户选中项目时调用此方法设置的回调
  33. /**
  34. * 回调
  35. * @param callback
  36. */
  37. setDone(callback)
  38. 三个滚轮滚动时触发的回调,可在此设置关联关系
  39. /**
  40. *
  41. * @param change1
  42. * @param change2
  43. * @param change3
  44. */
  45. setChange( change1, change2, change3)
  46. /**
  47. * 选中某一列某一行
  48. * @param c 列数
  49. * @param row 行数
  50. *
  51. */
  52. select( c, row)

Demo

  1. const data=require('./data.js')
  2. export default {
  3. get(res)
  4. {
  5. var self=this;
  6. var picker=weex.requireModule("fpicker");
  7. var d=data.getAddressData();
  8. var l= d.list
  9. //务必调用此方法,此方法有初始化的功能,最多3列
  10. picker.setCount(3);
  11. picker.setItems1(this.toArray(l))
  12. picker.setItems2(this.toArray(l[0].children))
  13. picker.setTheme('#f9f9f9','#4c4c4c')
  14. var index1=0;
  15. var index2=0;
  16. var index3=0;
  17. //每个滚轮的change事件
  18. picker.setChange(function(e){
  19. index1=e.index;
  20. picker.setItems2(self.toArray(l[index1].children))
  21. picker.select(2,0);
  22. if(l[index1].children.length>0)
  23. {
  24. picker.setItems3(self.toArray(l[index1].children[0].children))
  25. picker.select(3,0);
  26. }
  27. else
  28. {
  29. picker.setItems3([])
  30. }
  31. },function(e){
  32. index2=e.index;
  33. if(l[index1].children[index2].children.length>0)
  34. {
  35. picker.setItems3(self.toArray(l[index1].children[index2].children))
  36. picker.select(3,0);
  37. }
  38. else
  39. {
  40. picker.setItems3([])
  41. }
  42. },function(e){
  43. index3=e.index;
  44. })
  45. //点击完成的事件
  46. picker.setDone(function(e){
  47. var p1= l[e.index1];
  48. var p2= l[e.index1].children[e.index2];
  49. var p3= l[e.index1].children[e.index2].children[e.index3];
  50. res(p1,p2,p3)
  51. });
  52. // picker.show()
  53. return picker;
  54. },
  55. toArray(list)
  56. {
  57. var p=[];
  58. for(let i=0;i<list.length;i++)
  59. {
  60. p.push(list[i].name);
  61. }
  62. return p;
  63. },
  64. }