前言

大家大概会疑惑于我们应该如何构思进入Finclip小程序主页后，显示我们finclip小程序的主旨，我们大可以使用卡片式导航实现。卡片式导航实现每个功能的跳转，达到每个功能的实现，即提高了用户体验，又增加了页面的美观性。所以，接下来我将手把手教授大家，如何实现一个finclip小程序页面的卡片式导航。

<scroll-view scroll-y class="scrollPage">
  <view class='nav-list'>
    <navigator open-type="navigate" hover-class='none' url="/pages/index/{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
      <view class="nav-title">{{item.title}}</view>
      <view class="nav-name">{{item.name}}</view>
      <text class='cuIcon-{{item.icon}}'></text>
    </navigator>
  </view>
  <view class='cu-tabbar-height'></view>
</scroll-view>

实现逻辑层.js

可以从js模拟传入数据，也可以请求api接口传入数据。

data: {
    elements: [{
        title: '活动报名',
        name: 'registration',
        color: 'cyan',
        icon: 'edit'
      },
      {
        title: '活动签到',
        name: 'sign-in',
        color: 'blue',
        icon: 'text'
      },
      {
        title: '成绩查询',
        name: 'inquiry',
        color: 'purple',
        icon: 'font'
      },
      {
        title: '课表 ',
        name: 'class-schedule',
        color: 'mauve',
        icon: 'calendar'
      },
      {
        title: '社团介绍',
        name: 'Community',
        color: 'pink',
        icon: 'friendfill'
      },
      {
        title: '今天来抽签',
        name: 'random-draw',
        color: 'brown',
        icon: 'tagfill'
      }
    ],
    }

部分功能介绍与展示

社团介绍

大家对分类垂直导航肯定并不陌生吧，垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。垂直导航便于浏览内容，设计更方便，适应性强，垂直导航还可以设置更多的菜单内容。

今天就给大家带来如何设计一个社团介绍的垂直导航页面。我是仿照colorUI组件库重写的一个垂直导航，左边导航是社团的分类类别，右边是社团的简介和介绍。

话不多说，上代码。

Comm.fxml

通过scroll-view实现滑动，for渲染实现内容与菜单的显现。id记录当前位置。

<view class="VerticalBox">
	<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{scrollTops}}">
		<view class="cu-item  ax {{tabCur===index?'text-blue cur':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">{{item.name}}</view>
	</scroll-view>


	<scroll-view class="VerticalMain" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink" style="height:calc(100vh - 375rpx)">

		<view  class="padding-top padding-lr" wx:for="{{list}}" wx:key="{{index}}" class="right-cont" id="scroll-{{index}}">
<view class='cu-bar solid-bottom bg-white'>
        <view class='action'>
          <text class='cuIcon-title text-blue'></text> {{item.name}} </view>
      </view>
            <view class="cu-list menu-avatar" wx:for="{{item.list}}"  wx:key="{{index}}" wx:for-item="items">
        <view class="cu-item">
          <view class="cu-avatar round lg bg-grey"><image  class="img round" src="{{items.img}}" /></view>
          <view class="content">
            <view class="text-black">{{items.ids}}</view>
            <view class="text-gray text-sm flex">
              <text class="text-cut">
{{items.num}} 
              </text>
            </view>
          </view>
        </view>
        </view>
		</view>
	</scroll-view>
</view>

Comm.js

1.点击左边菜单切换右边内容

通过监听鼠标点击事件，实现点击左边菜单栏右边对应内容切换到正确的页面。

2.滑动右边内容联动切换左边的菜单被点击状态

通过监听右边的高度，实现左边菜单切换并联动右边内容。

拿到该元素的高度，设定它的top和bottom
判断滑动的距离是否大于设定的top并小于设定的bottom，然后对应左边菜单的滑动

data: {
    list: aclist,
    scrollTops: 0,  // 要滚动的高度
    tabCur: 0,  // 当前项
    rightCur: 0,  // 用于实现左边联动右边
  },
// 切换左边菜单并联动右边
  tabNav(e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      tabCur: index,
      rightCur: index,
      // 实现左边自动滑动到某个位置 4表示自动滑动到 第五项 （4为索引值）
      scrollTops: (index - 4) * 50
    })
  },
  /**
   * 滑动右边对应左边菜单切换
   */
  scrollLink(e) {
    let list = this.data.list
    let itemHeight = 0;
    for (let i = 0; i < list.length; i++) {
      //拿到每个元素
      let els = wx.createSelectorQuery().select("#scroll-" + i);
      els.fields({
        size: true
      }, function (res) {
        list[i].top = itemHeight;
        itemHeight += res.height;
        list[i].bottom = itemHeight
      }).exec()
    }

    this.setData({
      list
    })

    // 拿到滚动的高度
    let scrollTop = e.detail.scrollTop;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        this.setData({
          tabCur: i,
          scrollTops: (i - 4) * 50
        })
        return false
      }
    }
  }

今天来抽签

使用web-view外链实现的抽签大转盘

gitee地址 bydijia.gitee.io/inqury/

random.fxml

<web-view src="https://bydijia.gitee.io/inqury/" bindmessage=""></web-view>

tip：注意！上架的时候，记得在小程序开发后台备案域名。否则无法在finclip app打开。

好啦!今天的分享就到这里。在fide中编写finclip小程序是不是很简单呐！快快实践起来吧！

参考链接:finclip www.finclip.com/mop/documen…

colorUI github.com/weilanwl/Co…

如何实现一个finclip小程序的主页导航?速看此篇！

前言

目录

初始化一个项目

实现页面渲染层.fxml逻辑

实现逻辑层.js

部分功能介绍与展示

社团介绍

今天来抽签