WeexiOSKit主要是扩展了一些iOS的Component和Module,这样在weex端就可以很好的使用了。
Component 包括segmented-control(UISegmentedControl),stepper(UIStepper),seek- bar(UISeekBar),search-bar(UISearchBar),date-picker(UIDatePicker)。
Module主要包括actionSheet(UIActionSheet),MBProgressHUD(MBProgressHUD,loading视图),geolocation(CLLocationManager坐标),vibration(震动)。
segmented-control:支持iOS & web
属性:items(segmented-control里的项目,以分号隔开),momentary(是否设置选中状态),tint-color(颜色)
event:onchange
<segmented-control style="width: 240;height: 120;margin-top:20" items="hello;world" momentary= "false" tint-color= "red" onchange="onSCChangeAction"></segmented-control>
stepper 属性: value(当前的值),step-value(默认为1),minimum-value(最小值),maximum- value=”100(最大值),tint-color(颜色)
<stepper style="width: 240;height: 120;margin-top:20" value="20" step-value= "10" minimum-value="0" maximum-value="100" tint-color= "red" onchange="onChangeAction"></stepper>
seek-bar 属性: value(当前的值),minimum-value(最小值),maximum-value=”100(最大值),minimum-track-tint- color,maximum-track-tint-color, thumb-tint-color, minimum-track-image- src,maximum-track-image-src,thumb-image-src
<seek-bar style=" width: 400;height: 70;margin-top:20;margin-left:20" minimum-value="0" maximum-value="100" value="50" onchange="seekBarChange" minimum-track-tint-color="blue" maximum-track-tint-color="blue" thumb-tint-color="red" > sdsd</seek-bar> <seek-bar style=" width: 160;height: 140;margin-top:20;margin-left:220" minimum-value="0" maximum-value="100" value="50" onchange="imageSeekBarChange" thumb-image-src="https://raw.githubusercontent.com/jainsourabh2/SayIt/master/iOS/SayIt/SayIt/rating1.png" maximum-track-image-src="http://pic002.cnblogs.com/images/2012/348285/2012042611243397.png" minimum-track-image-src="http://pic002.cnblogs.com/images/2012/348285/2012042611244465.png"> sdsd</seek-bar>
search-bar 属性: tint-color(颜色)
event:onclick
<search-bar style="width: 300;height: 120;margin-top:20" tint-color= "red" onclick="onclicksearch"></search-bar>
date-picker 属性: tint-color(颜色)
<date-picker style="width: 640;height: 400;margin-top:20" tint-color= "red" onchange="onclickdatepicker" ></date-picker>
MBProgressHUD为loading模块 函数:showHUD(显示HUD,参数为title,detail,mode[枚举值indicator/text],cancelTitle,contentColor),hideHUD隐藏HUD()
toast: function() { var MBProgressHUD = require('@weex-module/MBProgressHUD'); MBProgressHUD.showHUD({title:"loading",contentColor:"red",mode:"indicator"}); setTimeout(function () { MBProgressHUD.hideHUD(); }, 2000) },
actionSheet 函数:actionSheetShow(参数为cancelButtonTitle,destructiveButtonTitle,otherButtonTitles(数组),以及一个回调)
actionSheet: function() { var me= this; var actionSheet = require('@weex-module/actionSheet'); actionSheet.actionSheetShow({ 'cancelButtonTitle': 'cancel', 'destructiveButtonTitle': 'destructive', 'otherButtonTitles': me.buttons }, function(result) { }); },
geolocation 定位模块
函数getCurrentPosition(参数accuracy,distanceFilter)
geolocationAction: function() { var me= this; var geolocation = require('@weex-module/geolocation'); geolocation.getCurrentPosition({ 'accuracy': '1000', 'distanceFilter': '10' }, function(result) { me.geolocationValue = JSON.stringify(result); }, function(result) { }); },
vibration 函数:vibrate(真机震动)
vibrate: function() { var vibration = require('@weex-module/vibration'); vibration.vibrate() }