收藏
回答

想实现一个动态样式,让文字颜色改变?

实现效果:当点击变红按钮弹窗,点击确定后,如果数据库有redden这个字段,就让文字变成红色,如果没有就不变。现在写的代码是,文字颜色没有改变,是什么问题?

wxml代码:

<view class="left" style="color:{{color}};" >
    <view class="top-group">
    <view class="top" wx:if="{{wehicle.istoppinged}}"></view>
       <view class="start-time">出发:{{wehicle.day}} {{wehicle.times}}</view>
    </view>
    <view class="distance-group">
       <view class="distance">{{wehicle.startPoint}}</view>
       <view class="distance"></view>
       <view class="distance">{{wehicle.goal}}</view>
       <view class="distance" wx:if="{{wehicle.carpool == '我要找人' || wehicle.carpool == '我要找货'}}">
             ({{wehicle.pass}})</view>
    </view>
    <view class="car">车型:{{wehicle.car}}</view>
    <view class="content">备注:{{wehicle.content}}</view>
    <view class="end-time">发布时间:{{util.timeFormat(wehicle.create_time)}}</view>
</view>

js代码:

// 变红点击确定
    async confirmRedden(e) {
        const that = this;
        const wehicles = that.data.wehicles;
        const redindex = that.data.redindex;
        const wehicle = wehicles[redindex];
        const id = wehicle._id;
        const ReddenStartTime = new Date().getTime();
        const ReddenEndTime = that.data.codered;
        wx.showLoading({
            title:"正在变红中..."
        })
        await db.collection("wehicle").doc(id).update({
            data:{
                redden:{
                    ReddenStartTime:ReddenStartTime,
                    ReddenEndTime:ReddenEndTime
                }
            }
        }).then(res => {
            if(!wehicle.redden){
                wehicle.redden = (ReddenEndTime)
            }else{
                wehicle.redden.push(ReddenEndTime)
            }
            wehicle.isreddened = true;
            wehicles[redindex] = wehicle;
            if(wehicle.redden){
                wx.hideLoading;
                wx.showToast({
                    title:'恭喜!变红成功!'
                })
                setTimeout(function(){
                    that.setData({
                        show_redfalse,
                        color:'red', // 改变文字颜色为红色
                        wehicles:wehicles,
                    })
                },800)
            }else{
                wx.showToast({
                    title:"变红失败!请重新变红!"
                })
                that.setData({
                    color:'',
                })
            }
        })
    },


回答关注问题邀请回答
收藏

4 个回答

  • 余生
    余生
    10-18

    提供一下代码片段

    创建代码片:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    10-18
    有用 1
    回复 7
    查看更多(2)
  • dreamhunter
    dreamhunter
    10-18

    断点调试,console.log(res)

    没看到你获取wehicles部分,确保异步执行顺序

    10-18
    有用
    回复 4
    • 蓝天☁
      蓝天☁
      10-18
      wehicles是从data里面获取的const wehicles = that.data.wehicles;
      10-18
      回复
    • dreamhunter
      dreamhunter
      10-18回复蓝天☁
      不是云数据库里面查的么?
      10-18
      回复
    • 蓝天☁
      蓝天☁
      10-18回复dreamhunter
      第一次进入页面的时候获取过一次,在弹窗确定变红这里就直接调用这个了,为了能够及时在页面更新显示出来,就重新保存到wehicles中,这段代码就是第一次进入页面时查询的
      10-18
      回复
    • dreamhunter
      dreamhunter
      10-21回复蓝天☁
      查询结束打印下,需要变色的时候也打印下,看看先后和数据是否正常
      10-21
      回复
  • 跨商通
    跨商通
    10-18

    是不懂写console.log的问题。

    10-18
    有用
    回复 1
    • 蓝天☁
      蓝天☁
      10-18
      点击确定后,全部信息都变红了,当重新编译后又都全恢复原来的,难道是console.log(”获取index的数据”,wehicles[redindex])里面更新没有获取到redden这个字段?
      10-18
      回复
  • 小黎
    小黎
    10-18

    直接看样式有没有生效啊,没生效就打debugger调试一步步看

    10-18
    有用
    回复
登录 后发表内容