经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
小程序导航栏滑动效果和下标获取
来源:cnblogs  作者:牧己  时间:2018/9/26 17:54:27  对本文有异议

新人小白初来乍到 各位前辈大牛还望多多指教。。。

wxss

/* 滑动导航栏 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.home-content-recommended-list{
width:100%;
height:70rpx;
line-height: 70rpx;
white-space:nowrap;
background: #202224;
}
.recommended{
/* width:156rpx; */
display:inline-block;
flex-direction:column;
text-align:center;
white-space:normal;
}
.recommendedImg{
width:156rpx;
height:156rpx;
border-radius: 10rpx;
}
.recommendedImg>image{
width:100%;
height:100%;

}
.recommended-text{
width:150rpx;
height:40rpx;
font-size:14px;
line-height:40rpx;
text-align: center;
color: #fff;
}


wxml

<!-- 滑动导航 -->

<view class="home-content-recommended-list">
    <scroll-view scroll-x="true">
      <block wx:for="{{recommended}}" wx:for-item="item" >
          <view class='recommended' catchtap='clickManager'>
               <view class='recommended-text'>{{item.text}}</view>
          </view>
       </block>
   </scroll-view>
</view>

js

data: {
   recommended: [
      { 'text': '吊坠' },
      { 'text': '耳饰' },
      { 'text': '戒指' },
      { 'text': '手链' },
      { 'text': '胸针' },
      { 'text': '手镯' },
  ]
},
 
/*获取列表的下标*/
wxml
 
<view data-index="{{index}}" bindtap="getClick"> </view>   
 
js
 
getClick:function(e){
     var i =  e.currentTarget.dataset.index;
    console.log(i);
}
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号