uniapp通过Slider 控制字体大小

在 uni-app 中，通过 Slider 控制字体大小的实现方式与在小程序中类似。具体实现步骤如下：

1. 在页面中添加一个 Slider 组件，设置它的最小值、最大值、步长和初始值等参数，同时给它一个 ref 名称，以便在 js 文件中获取它的值。

<slider ref="fontSlider" :min="12" :max="36" :step="2" v-model="fontSize" @change="onSliderChange"></slider>

2. 在 js 文件中，定义一个变量 fontSize，用于保存当前字体大小的值，同时在页面加载时，从本地缓存中获取上次保存的字体大小值，并将其赋值给 fontSize 变量。

export default {
  data() {
    return {
      fontSize: 16 // 默认字体大小为 16px
    };
  },

  onLoad() {
    // 从本地缓存中获取上次保存的字体大小值
    const fontSize = uni.getStorageSync('fontSize');
    if (fontSize) {
      this.fontSize = fontSize;
    }
  },

  methods: {
    // Slider 值改变时触发的事件
    onSliderChange(event) {
      const fontSize = event.detail.value;
      this.fontSize = fontSize;
      uni.setStorageSync('fontSize', fontSize); // 保存字体大小值到本地缓存
    }
  }
}

3. 在样式文件中，使用字体大小变量来设置文字大小，这样就可以根据 fontSize 的值来动态修改字体大小了。

.text {
  font-size: {{fontSize}}px;
}

这样，通过 Slider 控制字体大小的功能就实现了。当用户拖动 Slider 时，会触发 change 事件，我们在事件处理函数中更新字体大小的值，并将其保存到本地缓存中。同时，因为在样式文件中使用了字体大小变量，所以字体大小会自动随着 fontSize 变量的值而改变。