小程序模板网

微信小程序组件 分页菜单带下划线焦点切换

2018-04-26 虼蚤性

 

 

				
  1. <view class="edition-container">
  2. <view class='edition-content'>
  3. <!-- 1分类菜单-->
  4. <view class='edition-menu flex'>
  5. <block wx:key="edmenu" wx:for="{{edmenu}}" wx:for-index="index">
  6. <view class='flexcca' data-index='{{index}}' bindtap='keyMenu'>
  7. <text class="menu-title {{edmenuShow==index?'actitle':''}}">{{item.menunm}}</text>
  8. <view class="menu-under {{edmenuShow==index?'edactive':''}}"></view>
  9. </view>
  10. </block>
  11. </view>
  12. </view>
  13. </view>
 

				
  1. data: {
  2.  
  3. // (网页数据)
  4.  
  5. edmenu: [
  6. { menunm: '登录'},
  7. { menunm: '会员注册'},
  8. { menunm: '红娘注册'}
  9. ],
  10. edmenuShow:1,
  11.  
  12. },
  13. // 焦点控制函数
  14. keyMenu: function (e) {
  15. let that = this;
  16. let index = e.currentTarget.dataset.index;
  17. this.setData({
  18. edmenuShow: index
  19. })
  20.  
  21. },
 

				
  1. page{
  2. ">#fff;
  3. }
  4. .edition-container{
  5. font-size: 30rpx;
  6. color: #333;
  7.  
  8. }
  9. /* 1分类菜单 */
  10. .edition-menu{
  11. height: 80rpx;
  12. border-top: 1px solid #f7f7f7;
  13. border-bottom: 1px solid #f7f7f7;
  14. box-sizing: border-box;
  15. }
  16. .edition-menu>view{
  17. width: 33.33%;
  18. }
  19. .edition-menu .menu-title{
  20. margin-top: 16rpx;
  21. }
  22. .edition-menu .menu-under{
  23. width: 140rpx;
  24. height: 5rpx;
  25. ">transparent ;
  26. border-radius: 6rpx;
  27. margin-top: 10rpx;
  28. }
  29. .edition-menu .actitle{
  30. color: #ff4273;
  31. }
  32. .edition-menu .edactive{
  33. ">#ff4273;
  34. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24107.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询