微信小程序组件 分页菜单带下划线焦点切换 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:31


  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. }

相关案例查看更多