微信小程序radio-group 组件的使用
wxml 文件代码如下:
<view class="change"> <radio-group class="block lang_btn" bindchange="changeLanguage"> <view class="cu-form-group margin-top"> <view class="left_v"> <view class="title">中文</view> </view> <radio checked="{ {lang==1?true:false}}" value=1></radio> </view> <view class="cu-form-group margin-top"> <view class="left_v"> <view class="title">English</view> </view> <radio checked="{ {lang==2?true:false}}" value=2></radio> </view> </radio-group> </view>
.wxss文件样式如下:
page{background:#fff;} .choose-language { color: red; background: skyblue; } .lang_btn { display: block; } .lang_btn2 { display: none; } .lang_title { padding: 30rpx 30rpx; height: 60rpx; width: 100%; } .lang_btn .margin-top .left_v{ display:flex; align-items: center; } .lang_btn .margin-top .left_v .title{ margin-left:26rpx; } .change{padding:0 30rpx;} .change .titles{margin-top:76rpx;height:48rpx;line-height:48rpx;} .change .titles text{font-size:36rpx;font-weight:550;color:#3C3D43;margin-left:24rpx;}
.js文件如下:
data: { lang:1 }, changeLanguage: function(res) { switch (res.detail.value) { case 1: wx.setStorageSync(Language, _zhong); /** * 设置页面标题 */ wx.setNavigationBarTitle({ title: _(切换语言) }); break; case 2: wx.setStorageSync(Language, _ying); wx.setNavigationBarTitle({ title: _(切换语言) }); console.log(this.data._t, _["确定"]) break; case 3: wx.setStorageSync(Language, _riyu); wx.setNavigationBarTitle({ title: _(切换语言) }); break; case 4: wx.setStorageSync(Language, _hanyu); wx.setNavigationBarTitle({ title: _(切换语言) }); break; } /** * 设置页面下面的tab对应语言的文字 */ wx.setTabBarItem({ index: 0, text: _("服务咨询") }); wx.setTabBarItem({ index: 1, text: _("问题反馈") }) wx.setTabBarItem({ index: 2, text: _("意见建议") }); wx.setTabBarItem({ index: 3, text: _("个人中心") }) }, onShow: function() { wx.hideHomeButton({}) if (base.getLanguage() == _zhong) { this.setData({ lang: 1, }) } else if (base.getLanguage() == _ying) { this.setData({ lang: 2, }) } else if (base.getLanguage() == _riyu) { this.setData({ lang: 3, }) } else if (base.getLanguage() == _hanyu) { this.setData({ lang: 4, }) } },
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
【小程序】循环调用接口API