lookcommon_course/pages_tool/pages/gojuuonn/gojuuonn.vue

<template>
    <view>
        <view class="mojicontainer" :style="'height:' + (minHeight - 50) + 'px;'">
            <view :class="'mojidiv ' + (sannbunn ? 'sannbunn' : '')" v-for="(item, index) in mojiList" :key="index">
                <view class="moji-gana" v-if="hiraganaShow">{{ item.hiragana }}</view>

                <view class="moji-gana" v-else>{{ item.katakana }}</view>

                <view class="moji-roomaji">{{ item.roomaji }}</view>
            </view>
        </view>
        <view class="footTabBar">
            <view @tap="changeKANA" class="tab-changeKANA">
                <text>{{ changeKANAText }}</text>
            </view>
            <view @tap="toSEIONN" :class="'tab-toSEIONN ' + (tabnow == 'seionn' ? 'tabnow' : '')">
                <text>清音</text>
            </view>
            <view @tap="toDAKUONN" :class="'tab-toDAKUONN ' + (tabnow == 'dakuonn' ? 'tabnow' : '')">
                <text>浊音</text>
            </view>
            <view @tap="toYOUONN" :class="'tab-toYOUONN ' + (tabnow == 'youonn' ? 'tabnow' : '')">
                <text>拗音</text>
            </view>
        </view>
    </view>
</template>

<script>
var n = require('../../utils/data.js');
export default {
    data() {
        return {
            minHeight: '',
            mojiList: [],
            hiraganaShow: true,
            changeKANAText: 'あ',
            tabnow: 'seionn',
            sannbunn: false
        };
    },
    onLoad: function () {
        var that = this;
        uni.getSystemInfo({
            success: function (n) {
				that.minHeight=n.windowHeight;
            }
        });
		that.mojiList=n.seionn;
    },
    methods: {
        changeKANA: function (n) {
            var t = this.hiraganaShow;
			this.hiraganaShow=!t;
            if (t) {
				this.changeKANAText= 'ア';
            } else {
				this.changeKANAText='あ'
            }
        },

        toSEIONN: function () {
            
                this.mojiList=n.seionn;
                this.tabnow='seionn';
                this.sannbunn=false;
        },

        toDAKUONN: function () {
			this.mojiList=n.seionn;
			this.tabnow='dakuonn';
			this.sannbunn=false;
        },

        toYOUONN: function () {
         
			this.mojiList= n.youonn;
			this.tabnow='youonn';
			this.sannbunn=true;
        }
    }
};
</script>
<style>
@import './gojuuonn.css';
</style>