微信小程序radio-group 组件的使用

╰+哭是因爲堅強的太久メ 2023-07-03 12:17 15阅读 0赞

效果图：

![20200206165539900.png][]

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',
          })
        }
      },

[20200206165539900.png]: https://img-blog.csdnimg.cn/20200206165539900.png