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

最新推荐文章于 2024-09-09 08:33:16 发布

汉武大帝·

最新推荐文章于 2024-09-09 08:33:16 发布

阅读量8.6k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/yinge0508/article/details/104198619

版权

微信小程序专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图：

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