美文网首页
百度小程序两种方式实现图标切换选择

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

作者: 吕保鑫 | 来源:发表于2020-04-10 10:59 被阅读0次
    点击切换图标.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
            });
        },

    相关文章

      网友评论

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

          本文链接：https://www.haomeiwen.com/subject/scblmhtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|百度小程序两种方式实现图标切换选择|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！