微信小程序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
