Question

我试图通过按钮控制旋转木马，而不是旋转木马上面的控件（我将隐藏雪佛龙图标）。

我检查了雪佛龙图标，并在源中找到了这个：

@Override
protected void onCreate(Bundle savedInstanceState) {

    Log.i(TAG, "begining");
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    tele = (TextView) findViewById(R.id.tele);
    request res = new request();
    Log.i(TAG, "start");
    //try{
        Log.i(TAG, "before Soapobject");
    SoapObject Request = new SoapObject(NAMESPACE, METHOD_NAME);
        Log.i(TAG, "start1");
    SoapSerializationEnvelope soapEnvelope = new SoapSerializationEnvelope(SoapEnvelope.VER11);
        Log.i(TAG, "start2");
        soapEnvelope.dotNet = false;
        Log.i(TAG, "start3");
        soapEnvelope.setOutputSoapObject(Request);

    HttpTransportSE transport = new HttpTransportSE(URL);
        Log.i(TAG, "start4");
    try{
        transport.call(SOAP_ACTION, soapEnvelope);
        Log.i(TAG, "transpoartCALL");
        SoapObject resultString = (SoapObject) soapEnvelope.getResponse();
        Log.i(TAG, "beforesetTele");
        res.setTele(resultString.getProperty("tele").toString());
        tele.setText(res.getTele().toString());
        Log.i(TAG, "testing");
    }catch(Exception e){
        e.printStackTrace();
    }

}

我尝试将属性（类除外）添加到按钮，但它不起作用：

<a role="button" href="" class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
  <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">previous</span>
</a>

我猜它不起作用，因为按钮不在 uib-carousel，所以它不知道＆＃39; prev（）＆＃39;和＆＃39; isPrevDisabled（）＆＃39; 功能是。我可以引用该功能，还是创建自己的功能来控制它？

Plnkr Demo

我注意到的另一件事，但它是偏离主题的，如果你双击右或左V形按钮（让我们说右边），它只向右滑动一张。然后，如果我单击左V形，它会向右移动一次，然后向左移动（当您第二次单击左V形）时。有任何方法可以解决这个问题＆＃39;？它应该在双击时移动2张幻灯片，或者在第二次单击时丢弃，当单击相反方向时，请正确执行该操作。

Answer 1

更好的方法是使用template-url属性并以这种方式定义自己的轮播控件。我已经完成了我的项目（虽然我仍然坚持使用Next按钮也可以在我的控制器中触发自定义事件。）

<div class="col-xs-12 box-shadow" style="height: 50px; padding-top: 11px; background-color: #fff; z-index: 15;">Step {{ autoseq.wizardStep + 1 }} of 5</div>
<uib-carousel template-url="/tpl.html" active="autoseq.wizardStep" no-wrap="true" on-carousel-next="autoseq.onNext()" style="height: 395px;">
  <uib-slide style="height: 395px; margin-top: 5px;" index="0">
    ...slide content..
  </uib-slide>

</uib-carousel>

我的模板定义为（在同一个html文件中）

<script type="text/ng-template" id="/tpl.html">
<div class="carousel">
 <div class="carousel-inner" ng-transclude></div>
 <div class="carousel-controls">
   <div class="carousel-control" style="display: table-cell; float: left; width: 30%;">
    <a role="button" href class="left chevron-left" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
      <i class="fa fa-chevron-left"></i>
        <span style="margin-left:5px;">Back</span>
    </a>
   </div>
   <div style="display: table-cell; float: left; width: 40%;">
     <ol class="carousel-indicators" ng-show="slides.length > 1">
      <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }">
      </li>
     </ol>
   </div>
   <div class="carousel-control" style="display: table-cell; float: left; width: 30%;">
     <a role="button" href class="right chevron-right" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
       <span style="margin-right:5px;">Next</span>
       <i class="fa fa-chevron-right"></i>
     </a>
   </div>
 </div>
</div>
</script>

Answer 2

这是一个CSS解决方案，可以将“箭头按钮”操作到按钮位置。拿走背景渐变并将按钮放在箭头按钮内。

a.right.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  right: 16px;
  height: 39px;
  z-index: 2;
}
a.left.carousel-control {
  position: absolute !important;
  top: 100%;
  width: 385px;
  left: 16px;
  height: 39px;
  z-index: 2;
}
.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}
 https://plnkr.co/edit/qlh8UOfa6RFbMa5BKGR2

Answer 3

我遇到了同样的问题，不得不创建一个自定义指令。

.directive('carouselControls', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $timeout(function() {
                scope.slidesViewed = [];
                scope.slidesRemaining = [];
                var carouselScope = element.isolateScope();

                scope.goNext = function() {
                    carouselScope.next();
                };
                scope.goPrev = function() {
                    carouselScope.prev();
                };
                scope.setActiveSlide = function(number) {
                    if (number < 0 || number > carouselScope.slides.length - 1) {
                        return;
                    }
                    var direction = (scope.getActiveSlide() > number) ? 'prev' : 'next';
                    carouselScope.select(carouselScope.slides[number], direction);
                }
                scope.getActiveSlide = function() {
                    var activeSlideIndex = carouselScope.slides.map(function(s) {
                        return s.slide.active;
                    }).indexOf(true);
                    console.log(activeSlideIndex);
                    return activeSlideIndex;
                };
            });
        }
    };
}]);

这也是PLUNKR的工作原理。 Directive支持以下4个函数，在ng-click指令内使用carousel-controls的简单调用函数。

goNext()
goPrev()
setActiveSlide(slideIndex)
getActiveSlide()

UI Bootstrap控制uib-carousel与自定义按钮

3 个答案: