微信小程序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',
      })
    }
  },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章