javascript – 创建水平滚动离子/ angularjs

2023年9月30日 182次阅读

我试图用离子创建以下滚动导航,但不知何故导航不起作用,风格不太正确.任何人都可以帮助/指导我使用什么？

这是我想要的：

《javascript – 创建水平滚动离子/ angularjs》

这是我到目前为止,水平滚动列表,但上面更像是导航栏,当你触摸/选择它时,项目移动到中心.

《javascript – 创建水平滚动离子/ angularjs》

当第一个元素处于活动状态时,列表的左侧应保持为空.它们应该像导航一样滚动.
到目前为止,我有水平列表,但滚动活动的一个到中心是不起作用.

 <ion-scroll direction="x" class="wide-as-needed">
  <div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
    <a href="" id="anchor{{type}}" scroll-to="anchor{{type}}" class="button inline-button button-clear button-dark">{{type|uppercase}}</a>
  </div>
</ion-scroll>

指令是简单的锚导航,并试图导航到元素本身到目前为止不运气,它将导航到自己,但只使它可见而不是导航列表的中心：https://docs.angularjs.org/api/ng/service/$anchorScroll
此角度$anchorScroll也设计为垂直滚动而不是水平…

也可以使用TabbedSlideBox,但此插件在激活时也没有选项卡滚动到中心

最佳答案 更新以供将来参考我将留在这里.

你可以尝试使用它
http://demo.jankuri.com/ngSlimscroll/

但对我来说,创建自定义指令有帮助.

function center() {
    var currentElement = document.getElementById("active");
    currentElement.className = "center-menu";
    var nav = document.getElementById("nav");
    var navWidth = document.getElementById("nav2").offsetWidth;
    var margin = 0;
    for(var i =0; i<nav.children.length; i++){

        if(currentElement == nav.children[i]){
            console.log(nav.children[i]);
            break;
        }else {
            margin += nav.children[i].offsetWidth;
        }
    }
    nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}

CSS

nav {
  background: #9df0e8;
  overflow: hidden;
  border-bottom: 8px solid #40b5a2; 
  border-top: 2px solid #40b5a2;
  width: 80%;
  margin: 0 auto;
}

nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }

nav ul li { float: left; }

nav ul li a,
nav ul li span {
  display: block;
  background: #9df0e8;
  color: #345661;
  text-decoration: none;
  padding: 1em;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }

.arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #9df0e8 transparent transparent transparent;
    display: none;
    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.center-menu .arrow{display: block;}
点赞