用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2017-12-11 00:34

view class="edition-container"view class='edition-content'!-- 1分类菜单--view class='edition-menu flex'block wx:key="edmenu" wx:for="{{edmenu}}" wx:for-index="index"view class='flexcca' data-index='{{ ...


  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. edmenu: [
  4. { menunm: '登录'},
  5. { menunm: '会员注册'},
  6. { menunm: '红娘注册'}
  7. ],
  8. edmenuShow:1,
  9. },
  10. // 焦点控制函数
  11. keyMenu: function (e) {
  12. let that = this;
  13. let index = e.currentTarget.dataset.index;
  14. this.setData({
  15. edmenuShow: index
  16. })
  17. },
  1. page{
  2. ">#fff;
  3. }
  4. .edition-container{
  5. font-size: 30rpx;
  6. color: #333;
  7. }
  8. /* 1分类菜单 */
  9. .edition-menu{
  10. height: 80rpx;
  11. border-top: 1px solid #f7f7f7;
  12. border-bottom: 1px solid #f7f7f7;
  13. box-sizing: border-box;
  14. }
  15. .edition-menu>view{
  16. width: 33.33%;
  17. }
  18. .edition-menu .menu-title{
  19. margin-top: 16rpx;
  20. }
  21. .edition-menu .menu-under{
  22. width: 140rpx;
  23. height: 5rpx;
  24. ">transparent ;
  25. border-radius: 6rpx;
  26. margin-top: 10rpx;
  27. }
  28. .edition-menu .actitle{
  29. color: #ff4273;
  30. }
  31. .edition-menu .edactive{
  32. ">#ff4273;
  33. }
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: ThisCall 来自: cnblogs

相关阅读