Swipe between tabs idems, onsen-ui -
i´m using lastly version of onsen-ui v1.14, , i´m trying swipe between tabs, on facebook messenger, i´m not able.
i´ve tried ¨setactivetab¨ function ons-gesture-detector, several variables.
here's did (for tool bar)
css
.activebtn .ng-scope{ color: blue; }
html
<ons-template id="list.html"> <ons-toolbar var="tb"> <div class="center"> <ons-toolbar-button class="tbbtn" id="btn_0" ng-click="abc.setactivecarouselitemindex(0)">all</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_1" ng-click="abc.setactivecarouselitemindex(1)">people</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_2" ng-click="abc.setactivecarouselitemindex(2)"> topics</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_3" ng-click="abc.setactivecarouselitemindex(3)">accounts</ons-toolbar-button> </div> </ons-toolbar> <ons-carousel style="width: 100%; height: 100%" auto-scroll var="abc" ng-controller="listctrl"> <ons-carousel-item> a... </ons-carousel-item> <ons-carousel-item> b... </ons-carousel-item> <ons-carousel-item> c... </ons-carousel-item> <ons-carousel-item> d... </ons-carousel-item> </ons-carousel> </ons-template>
js
app.controller('listctrl', function($scope, $http) { $('#btn_0').addclass('activebtn'); settimeout(function(){ abc.on('postchange', function(){ $('.tbbtn ').removeclass('activebtn'); $('#btn_' + abc.getactivecarouselitemindex()).addclass('activebtn'); }); }, 400); });
tabs swipe-gesture onsen-ui
No comments:
Post a Comment