更新

src/views/tempo-practice/index.module.less

@@ -116,6 +116,8 @@
       cursor: pointer;
       margin: 0 7px;
 
+
+
       &::before,
       &::after {
         width: 19px;
@@ -139,6 +141,24 @@
     border-radius: 14px;
     border: 3px solid #fff;
     background: #FFFFFF;
+    position: relative;
+
+    .direction {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      z-index: 9;
+
+      &>div {
+        width: 100%;
+        flex: 1;
+      }
+    }
 
     &.active {
       border: 3px solid rgba(255, 167, 0, 1);
@@ -274,6 +294,20 @@
       max-height: 200px;
       box-shadow: none;
       overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: rgba(0, 0, 0, 0.1);
+      }
     }
 
     .van-popover__action {

src/views/tempo-practice/index.tsx

@@ -16,7 +16,12 @@ import j1 from './images/music/j-1.png';
 // import j2 from './images/music/j-2.png';
 import { Popover, Popup, showToast } from 'vant';
 import SettingModal from './setting-modal';
-import { randomScoreElement, renderScore, setting } from './setting';
+import {
+  randomScoreElement,
+  renderScore,
+  setting,
+  elementDirection
+} from './setting';
 import { handleStartTick, hendleEndTick } from './tick';
 import { handleStartBeat, hendleEndBeat } from './beat-tick';
 import { browser } from '@/helpers/utils';
@@ -131,19 +136,37 @@ export default defineComponent({
                     item.length !== 1 &&
                     styles.small
                 ]}>
-                {item.map((child: any, j: number) => (
+                {item.map((child: any, jIndex: number) => (
                   <div
-                    class={[styles.beat, child.selected ? styles.active : '']}
-                    onClick={() => {
-                      if (setting.playState === 'play') return;
-                      if (setting.tempo.length <= 1) {
-                        showToast('无法切换，请选择至少2种节奏型');
-                        return;
-                      }
-                      const obj = randomScoreElement(child.index);
-                      child.index = obj.index;
-                      child.url = obj.url;
-                    }}>
+                    class={[styles.beat, child.selected ? styles.active : '']}>
+                    <div class={styles.direction}>
+                      <div
+                        class={styles.up}
+                        onClick={() => {
+                          if (setting.playState === 'play') return;
+                          if (setting.tempo.length <= 1) {
+                            showToast('无法切换，请选择至少2种节奏型');
+                            return;
+                          }
+                          // const obj = randomScoreElement(child.index);
+                          const obj = elementDirection('up', child.index);
+                          child.index = obj.index;
+                          child.url = obj.url;
+                        }}></div>
+                      <div
+                        class={styles.down}
+                        onClick={() => {
+                          if (setting.playState === 'play') return;
+                          if (setting.tempo.length <= 1) {
+                            showToast('无法切换，请选择至少2种节奏型');
+                            return;
+                          }
+                          // const obj = randomScoreElement(child.index);
+                          const obj = elementDirection('down', child.index);
+                          child.index = obj.index;
+                          child.url = obj.url;
+                        }}></div>
+                    </div>
                     <div class={styles.imgSection}>
                       <img src={getImage(child.url)} />
                     </div>

src/views/tempo-practice/setting-modal/index.module.less

@@ -33,6 +33,20 @@
   padding: 0 26px;
   overflow-y: auto;
   height: 100%;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 0;
+    background: rgba(0, 0, 0, 0.1);
+  }
 }
 
 .settingParams {

src/views/tempo-practice/setting.ts

@@ -80,6 +80,36 @@ export const randomScoreElement = (element?: string) => {
   }
 };
 
+/** 设置元素方向 */
+export const elementDirection = (type: string, index) => {
+  const prefix = setting.element === 'jianpu' ? 'j-' : 'f-';
+  let ele = '';
+  let i = index;
+  const tempoList = setting.tempo;
+  if (type === 'up') {
+    if (index <= 0) {
+      ele = tempoList[tempoList.length - 1];
+      i = tempoList.length - 1;
+    } else {
+      ele = tempoList[index - 1];
+      i = index - 1;
+    }
+  } else if (type === 'down') {
+    if (index >= tempoList.length - 1) {
+      ele = tempoList[0];
+      i = 0;
+    } else {
+      ele = tempoList[index + 1];
+      i = index + 1;
+    }
+  }
+
+  return {
+    url: prefix + ele + '.png',
+    index: i
+  };
+};
+
 /** 生成谱面 */
 export const renderScore = () => {
   const barLine = Number(setting.barLine);