例如,可以使用uni-storage组件将用户设置存储在本地: export default { methods: { onChangeFontSize: function(value) { uni.setStorageSync('font-size', value) uni.setGlobalStyle({ 'html,body': { fontSize: uni.upx2px(value) + 'px' } }) } } } 在页面上调用这个方法,可以设置用户选择的不同...
首先要改造的是style="font-size: 180rpx;" 这里不能直接写死,而是要动态改变,所以我在 data 当中定义了一个变量curFontSize,默认值为"180rpx", 并且替换掉了原来的style="font-size: 180rpx;" 代码语言:vue 复制 curFontSize: "180rpx", 代码语言:vue 复制 :style="{fontSize: curFontSize}" 然后下...
4.在每个页面中通过添加page-meta调节,page-meta 配置项参考链接 <template><page-meta:root-font-size="`${this.$store.state.scaleFontSize}px`"></page-meta><view></view></template> 此种方法navbar和tabbar的字体大小不能改变。 其实uniapp的示例demo APP是可以跟随系统字体大小的变化而变化的,但是我...
把根节点font-size值写入vuex中。 实现字体大小设置页面。修改大小后,要把值写入缓存和vuex。 APP启动时,从缓存里读取上次设置的fontSize值,赋值给vuex_fontsize。 其他需要被控制大小的页面,顶部添加代码: <page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-...
font-size: 24rpx; line-height: 60rpx; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: center; color: #ffffff; margin-left: auto; } } .like-content { width: 700rpx; margin: 25rpx auto 30rpx; ...
font-size: 30rpx; color: #fff; background: #027BFF; text-align: center; border-radius: 16rpx; }</style> 使用说明 1.建议在pages.json中将引用插件的页面添加一下配置禁止下拉刷新和禁止页面滑动,防止出现性能或页面抖动等问题。 {"enablePullDownRefresh":false,"disableScroll":true} ...
font-size: 60rpx; color: white; } } 运行,效果如下图,但是发现还是有问题的: 这个问题呢,我已经想到了,之前不是在 data 中定义了一个 buttons 数组吗,这个数组中存放的是每个按钮的信息,在信息中有一个 class 属性里面有一个ml-zero这个是用来设置按钮的左边距的,凡是添加了这个属性就代表着没有左边距,...
fontSize: 文字默认大小 list:tab 列表 pagePath:页面路径,必须在 pages 中先定义 text:tab 上按钮文字 iconPath:图片路径 selectedIconPath:选中时的图片路径 这里设置 index.vue、message.vue、user.vue 三个页面为底部导航栏。 5. 内置组件 官网关于内部组件的文档: ...
font-size: 60rpx; color: #FFFFFF; } </style> 切换手机型号进行测试。 样式和插件使用 样式使用 CSS 支持的,UniApp 中都支持 代码语言:vue 复制 <template> <view> <view style="width: 300rpx; height: 300rpx; background-color: red; margin-top: 30rpx;"> ...
{// 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc"text":"\ue102","selectedText":"\ue103","fontSize":"17px","color":"#000000","selectedColor":"#0000ff"}},{"pagePath":"pages/API/index","iconPath":"static/image/icon_API.png","selectedIconPath":"static/image/icon_API_...