uniapp单词翻页

实现单词翻页功能的方法

在UniApp中实现单词翻页功能，可以通过以下步骤完成：

页面布局与数据绑定 在<template>中放置一个显示单词的文本区域和翻页按钮，使用v-model绑定当前单词数据。

<template>
  <view class="word-container">
    <text>{{ currentWord }}</text>
    <button @click="prevWord">上一词</button>
    <button @click="nextWord">下一词</button>
  </view>
</template>

数据与逻辑处理 在<script>中定义单词数组和当前索引，通过方法控制翻页逻辑。

<script>
export default {
  data() {
    return {
      words: ['apple', 'banana', 'cherry', 'date'],
      currentIndex: 0
    }
  },
  computed: {
    currentWord() {
      return this.words[this.currentIndex]
    }
  },
  methods: {
    prevWord() {
      this.currentIndex = (this.currentIndex - 1 + this.words.length) % this.words.length
    },
    nextWord() {
      this.currentIndex = (this.currentIndex + 1) % this.words.length
    }
  }
}
</script>

样式优化 在<style>中添加基础样式，提升用户体验。

.word-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
button {
  margin-top: 10px;
  width: 100px;
}

进阶功能扩展

本地存储单词列表 使用uni.setStorageSync保存单词数据，避免每次重新加载。

onLoad() {
  const savedWords = uni.getStorageSync('wordList')
  if (savedWords) {
    this.words = savedWords
  }
}

添加动画效果 通过CSS过渡效果使单词切换更流畅。

text {
  transition: opacity 0.3s;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

语音朗读功能 集成Web Speech API实现单词发音。

speakWord() {
  const utterance = new SpeechSynthesisUtterance(this.currentWord)
  speechSynthesis.speak(utterance)
}