百度小程序两种方式实现图标切换选择

作者: 吕保鑫 | 来源:发表于2020-04-10 10:59 被阅读0次

百度小程序两种方式实现图标切换选择
微信小程序页面跳转
轻松生成小程序分享海报
Android O Launcher3新特性（图标形状）
小程序图片裁剪
界面换肤笔记
微信与今日头条导航栏切换实现
Android：监听应用前后台切换及思考
小程序项目笔记（一）
小程序-下拉刷新&&上拉加载

点击切换图标.png

第一种方式

.appraise {
  width: 84rpx;
  height: 84rpx;
}

.appraise image {
  width: 84rpx;
  height: 84rpx;
}

.appraisetext {
  font-size: 22rpx;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin-top: 15rpx;
}

<view class='appraise' data-index="{{daindex1}}" bindtap="choosesort1">
            <view>
              <image src="{{imageurl1}}"></image>
              <view class="appraisetext">好评</view>
            </view>
          </view>
          <view class='appraise' data-index="{{daindex2}}" bindtap="choosesort2">

            <image src="{{imageurl2}}"></image>
            <view class="appraisetext">中评</view>
          </view>
          <view class='appraise' data-index="{{daindex3}}" bindtap="choosesort3">

            <image src="{{imageurl3}}"></image>
            <view class="appraisetext">差评</view>
          </view>

 imageurl1: "../../image/dialogue/good_reputation.png",
    daindex1: 0,
    imageurl2: "../../image/dialogue/medium_review.png",
    daindex2: 0,
    imageurl3: "../../image/dialogue/negative_comment.png",
    daindex3: 0,

// /*  评价切换图标   */
    choosesort1: function(e) {
      console.log(e)
      if (this.data.daindex1 == 0) {
        this.setData({
          imageurl1: "../../image/dialogue/good_reputation_active.png",
          imageurl2: "../../image/dialogue/medium_review.png",
          imageurl3: "../../image/dialogue/negative_comment.png",
          daindex1: 1
        })
      } else {
        this.setData({
          imageurl1: "../../image/dialogue/good_reputation.png",
          daindex1: 0
        })
      }

    },
    choosesort2: function(e) {
      if (this.data.daindex2 == 0) {
        this.setData({
          imageurl1: "../../image/dialogue/good_reputation.png",
          imageurl2: "../../image/dialogue/medium_review_active.png",
          imageurl3: "../../image/dialogue/negative_comment.png",
          daindex2: 1
        })
      } else {
        this.setData({
          imageurl2: "../../image/dialogue/medium_review.png",
          daindex2: 0
        })
      }

    },
    choosesort3: function(e) {
      if (this.data.daindex3 == 0) {
        this.setData({
          imageurl1: "../../image/dialogue/good_reputation.png",
          imageurl2: "../../image/dialogue/medium_review.png",
          imageurl3: "../../image/dialogue/negative_comment_active.png",
          daindex3: 1
        })
      } else {
        this.setData({
          imageurl3: "../../image/dialogue/negative_comment.png",
          daindex3: 0
        })
      }

    },

第二种方式

.moretool {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 33;
}

.cardbar {
  width: 596rpx;
  height: 580rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.cardbox {
  height: 490rpx;
  padding: 60rpx 48rpx 0;
}

.cardbtn {
  background: #007aff;
  color: #fff;
  height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 90rpx;
  bottom: 0;
  position: absolute;
  width: 100%;
  border-radius: 0;
}

.close {
  width: 18rpx;
  height: 18rpx;
  position: absolute;
  right: 26rpx;
  top: 18rpx;
}

.close image {
  width: 18rpx;
  height: 18rpx;
}

.cardtxt {
  text-align: center;
  font-size: 30rpx;
  color: rgba(51, 51, 51, 1);
  margin-top: 15rpx;
}

.cardtextarea {
  width: 487rpx;
  font-size: 24rpx;
  height: 135rpx;
  background: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(227, 228, 233, 1);
  border-radius: 6rpx;
  padding-left: 10rpx;
  line-height: 30rpx;
}

.cardtext {
  width: 487rpx;
  font-size: 24rpx;
  height: 135rpx;
}

.cardcheck {
  height: 135rpx;
  margin: 34rpx auto 20rpx;
  width: 80%;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.appraise {
  width: 84rpx;
  height: 84rpx;
}

.appraise image {
  width: 84rpx;
  height: 84rpx;
}

.appraisetext {
  font-size: 22rpx;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin-top: 15rpx;
}

.forplace {
  font-size: 24rpx;
}

.send button {
  width: 120rpx;
  height: 60rpx;
  background: #007aff;
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-left: 20rpx;
  /* opacity: 0; */
}
swan-button:after{border:none}
.radiogroup {
  width: 100%;
}

.ui-radio {
  width: 84rpx;
  height: 84rpx;
  text-align: center;
  margin: 10rpx 10rpx;
  white-space: nowrap;
  font-size: 14px;
}

.ui-radio.active {
  background-color: #1aad19;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #1aad19;
  width: 160rpx;
  height: 70rpx;
  text-align: center;
  margin: 10rpx 10rpx;
  white-space: nowrap;
}

.text {
  color: #000;
  line-height: 70rpx;
  font-size: 14px;
}

.ui-radio.active .text {
  color: #fff;
  line-height: 70rpx;
  font-size: 14px;
}

<form bindsubmit="formSubmit2" name="form2" id="form2">
    <view class="moretool" hidden="{{moretool}}" catchtouchmove="return">
        <view class="cardbar">
            <view class="close" bindtap="closenamecard">
                <image src="../../image/dialogue/close_button.png"></image>
            </view>
            <view class="cardbox">
                <view class="cardtxt">您对本次服务的评价是？</view>
                <view class='cardcheck'>
                    <radio-group bindchange="radioChange" class="radiogroup" name="radiogroup">
                        <view class='label'>
                            <label class="ui-radio {{item.checked==true?'active':''}}" s-for="item, index in items">
                                <view class='appraise'>

                                    <image class='appraise' src="{{item.imgurl}}"></image>
                                    <radio class="text" value="{{item.name}}" name="{{item.value}}" />

                                </view>
                                <text class="appraisetext">{{item.name}}</text>
                            </label>
                        </view>
                    </radio-group>
                </view>


                <view class="cardtextarea">
                    <textarea name="cardtext" value="{=cardtext=}" placeholder="评价内容（选填）" placeholder-class="forplace"
                        class="cardtext"></textarea>
                </view>
            </view>
            <button class="cardbtn" formType="submit" bind:tap="sendgood">提交</button>
        </view>

    </view>
</form>

items: [{
      name: '好评',
      value: '好评',
      imgurl: "../../image/dialogue/good_reputation.png"
    }, {
      name: '中评',
      value: '中评',
      imgurl: "../../image/dialogue/medium_review.png"
    }, {
      name: '差评',
      value: '差评',
      imgurl: "../../image/dialogue/negative_comment.png"
    }],

radioChange: function (e) {
      var that = this;
      switch (e.detail.value) {
        case "好评":
          that.setData({
            'items[0].imgurl': "../../image/dialogue/good_reputation_active.png",
            'items[1].imgurl': "../../image/dialogue/medium_review.png",
            'items[2].imgurl': "../../image/dialogue/negative_comment.png"
          });
          break;
        case "中评":
          that.setData({
            'items[0].imgurl': "../../image/dialogue/good_reputation.png",
            'items[1].imgurl': "../../image/dialogue/medium_review_active.png",
            'items[2].imgurl': "../../image/dialogue/negative_comment.png"
          });
          break;
        case "差评":
          that.setData({
            'items[0].imgurl': "../../image/dialogue/good_reputation.png",
            'items[1].imgurl': "../../image/dialogue/medium_review.png",
            'items[2].imgurl': "../../image/dialogue/negative_comment_active.png"
          });
          break;

        default:
          console.log("default");
      }
    },
formSubmit2: function (e) {
            var that = this;
            var res = {
                type: "pingjia",
                value: e.detail.value.radiogroup + "\n" + e.detail.value.cardtext,
                ptype: e.detail.value.radiogroup,
            };
            that.triggerEvent('pingjia', res);
            swan.showToast({
                title: '提交成功'
            });
            that.setData({
                moretool: true,
                inputmore: true
            });
        },
 closenamecard: function () {
            var that = this;
            that.setData({
                moretool: true
            });
        },

百度小程序两种方式实现图标切换选择
第一种方式第二种方式
微信小程序页面跳转
小程序常用两种方式，普通页面跳转和tab栏切换（跳转）跳转方式一通过组件navigator进行跳转,需要指定跳...
轻松生成小程序分享海报
需求小程序分享到朋友圈只能使用小程序码海报来实现，生成小程序码的方式有两种，一种是使用后端方式，一种是使用小程序...
Android O Launcher3新特性（图标形状）
之前我简单介绍过AdaptiveIcon的适配方式和实现原理，今天主要介绍下在Launcher中是如何实现切换图标...
小程序图片裁剪
两种方式：we-cropper 和 image-cropperwe-cropper在小程序android选择图片后...
界面换肤笔记
界面换肤的两种实现方式 1.主题切换模式创建两种主题模式自定义属性应用样式，通过?attr/去引用样式切换...
微信与今日头条导航栏切换实现
现在通用的不同样式导航栏切换实现方式如下两种今日头条的实现：微信的实现：微信的实现方式其实更加优雅美观，左右...
Android：监听应用前后台切换及思考
Android：监听应用前后台切换需求：监听应用前后台切换分析：监听应用前后台切换实现方式有两种 1.起一个线...
小程序项目笔记（一）
一、路由切换的两种方式 1、wx.navigateTo保留当前页面，跳转到应用内的某个页面(小程序中页面栈最多十层...
小程序-下拉刷新&&上拉加载
小程序实现下拉刷新和上拉加载更多有两种方式：1.通过小程序自带的页面相关事件处理函数 onPullDownRefr...