精华内容
下载资源
问答
  • 微信小程序点击变色并且视图切换显示 /隐藏详情(通过点击事件来实现界面切换) 先看效果:点击热门是当前页,点击关注是关注页面 html部分: <view class="hot {{TopIndex == 0 ? 'active':''}}" data-index=...

    微信小程序点击变色并且视图切换显示 /隐藏详情(通过点击事件来实现界面切换)

    先看效果:点击热门是当前页,点击关注是关注页面
    在这里插入图片描述在这里插入图片描述
    html部分:

     <view class="hot {{TopIndex == 0 ? 'active':''}}" data-index="0" bindtap="click">热门</view>//3元表达式判断点击的下表是不是当前下表如果是就切换否则不切换
     <view class="attention {{TopIndex == 1 ? 'active':''}}" data-index="1" bindtap="click">关注</view>
    
     <view class="content" wx:if="{{TopIndex == 0}}">
           <view>这是热门页</view>
        </view>
        <view class="content1" wx:if="{{TopIndex == 1}}">
            <view>这是关注</view>
        </view>
     
    

    css部分:.active { color: #000; }
    js部分:

     data: {
            TopIndex: 0
        },
         click(e) {
            let index = e.currentTarget.dataset.index
            console.log(index)
            this.setData({
                TopIndex: index
            })
        },
    
    展开全文
  • 主要介绍了微信小程序关键字变色实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序渐变色

    2019-11-12 21:40:15
    微信小程序渐变色 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/u010377372/article/details/79721725 CSS3 渐变(gradients)...

    微信小程序渐变色

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/u010377372/article/details/79721725

    CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。
    CSS3 定义了两种类型的渐变(gradients):

    • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
    • 径向渐变(Radial Gradients)- 由它们的中心定义

    线性渐变 - 从上到下(默认情况下)

    .view11 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(red, blue);

    }

    线性渐变 - 从左到右

    .view12 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(to right, red , blue);

    }

    线性渐变 - 对角

    .view13 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(to bottom right, red , blue);

    }

    带有指定的角度的线性渐变

    .view14 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(120deg, red, blue);

    }

    带有多个颜色结点的从上到下的线性渐变

    .view15 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(red, green, blue);

    }

    带有彩虹颜色和文本的线性渐变

    .view16 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

    }

    从左到右的线性渐变,带有透明度

    .view17 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

    }

    repeating-linear-gradient() 函数用于重复线性渐变

    .view18 {

    width: 240px;

    height: 60px;

    margin: 10px auto;

    background: repeating-linear-gradient(red, yellow 10%, green 20%);

    }

    径向渐变 - 颜色结点均匀分布(默认情况下)

    .view21 {

    width: 120px;

    height: 120px;

    margin: 10px auto;

    background: radial-gradient(red, green, blue);

    }

    径向渐变 - 颜色结点不均匀分布

    .view22 {

    width: 120px;

    height: 120px;

    margin: 10px auto;

    background: radial-gradient(red 5%, green 15%, blue 60%);

    }

    形状为圆形的径向渐变

    .view23 {

    width: 120px;

    height: 120px;

    margin: 10px auto;

    background: radial-gradient(circle, red, yellow, green);

    }

    repeating-radial-gradient() 函数用于重复径向渐变

    .view26 {

    width: 120px;

    height: 120px;

    margin: 10px auto;

    background: repeating-radial-gradient(red, yellow 10%, green 15%);

    }

    img

    展开全文
  • yj.微信小程序渐变色

    2019-01-28 12:03:50
    注:因最近在研究微信小程序,所以记录下观看 CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左...

    注:因最近在研究微信小程序,所以记录下观看

    CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。

    CSS3 定义了两种类型的渐变(gradients):

    线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

    径向渐变(Radial Gradients)- 由它们的中心定义

    线性渐变 - 从上到下(默认情况下)

    .view11 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(red, blue); 

    }

    线性渐变 - 从左到右

    .view12 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(to right, red , blue);

    }

    线性渐变 - 对角

    .view13 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(to bottom right, red , blue); 

    }

    带有指定的角度的线性渐变

    .view14 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(120deg, red, blue);

    }

    带有多个颜色结点的从上到下的线性渐变

    .view15 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(red, green, blue);

    }

    带有彩虹颜色和文本的线性渐变

    .view16 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 

    }

    从左到右的线性渐变,带有透明度

    .view17 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 

    }

    repeating-linear-gradient() 函数用于重复线性渐变

    .view18 {

       width: 240px;

       height: 60px;

       margin: 10px auto;

       background: repeating-linear-gradient(red, yellow 10%, green 20%);

    }

    径向渐变 - 颜色结点均匀分布(默认情况下)

    .view21 {

       width: 120px;

       height: 120px;

       margin: 10px auto;

       background: radial-gradient(red, green, blue);

    }

    径向渐变 - 颜色结点不均匀分布

    .view22 {

       width: 120px;

       height: 120px;

       margin: 10px auto;

       background: radial-gradient(red 5%, green 15%, blue 60%);

    }

    形状为圆形的径向渐变

    .view23 {

       width: 120px;

       height: 120px;

       margin: 10px auto;

       background: radial-gradient(circle, red, yellow, green); 

    }

    repeating-radial-gradient() 函数用于重复径向渐变

    .view26 {

       width: 120px;

       height: 120px;

       margin: 10px auto;

       background: repeating-radial-gradient(red, yellow 10%, green 15%);

    }

    参考资料

    w3school 在线教程

    CSS3 教程 | 菜鸟教程

    其他

    完整代码:https://github.com/guyoung/GyWxappCases/tree/master/CSS3

     

    原文章:https://mp.weixin.qq.com/s/8hjraP9f2X30aE8wSILguw

    展开全文
  • 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
  • 微信小程序里,希望出现点击图标图标先变色然后跳转到指定页面。 首先需要准备两张图标的图片,一张是未点击状态,一张是点击后的状态。 index.wxml &amp;amp;lt;view&amp;amp;gt; &amp;amp;...

    至今不知道怎么上传动图的我只能用嘴描述了…在微信小程序里,希望出现点击图标图标先变色然后跳转到指定页面。
    首先需要准备两张图标的图片,一张是未点击状态,一张是点击后的状态。
    index.wxml

    <view>
            <image catchtap='change' wx:if="{{click}}" src='/icon/1.png'></image>
            <image wx:else src='/icon/2.png'></image>
    </view>
    

    wxml里用到了官方文档中的wx.if、wx.else条件渲染。当click为true时,显示1.png,否则,暨click为false,显示2.png。
    click在js中先进行初始化定义为true


    index.js

    page({
        data:{
        ...
        ...
        click:true
        },
        change: function () {
        var click = this.data.click;
        this.setData({
          click: false
        })
        setTimeout(function () {
          wx.switchTab({
            url: '/pages/mine/mine',
          })
        }, 50)
      }
    })
    

    这里用到了setTimeout()来做延时,用wx.switchTab是因为要跳转的页面已经在tabBar列表中了,所以只能用switchTab。

    展开全文
  • 微信小程序使用 echart 渲染渐变色时报错: Maximum call stack size exceeded;at setTimeout callback function RangeError: Maximum call stack size exceeded WAService.js:1 thirdScriptError Maximum call ...
  • 效果图:这里默认第一个选中 点击每个不会改变样式 根据index来实现wxml:页面class有三目运算{{item.num}}wxss:_left 蓝色 left 黑色.box{width: 100%;height: auto;border-top: 1px solid #efefef;}.box-...
  • 主要介绍了微信小程序点击按钮动态切换input的disabled禁用/启用状态功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 保存 这样的一个按钮,在wxss中设置它的样式 .view-box-btn { width: 90%; height: 100rpx; margin-top: 20px; border-radius: 20rpx;... border: 1px solid rgb(248, 248, 255);...虽然设置了active效果,但是此时在...
  • 微信小程序本身没有table标签,本博客使用view来模仿实现隔行变色表格的效果。
  • 微信小程序设置 hover-class,实现点击变色效果 微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。 目前支持 hover-class 属性的组件有三个:...
  • 微信小程序顶部渐变色实现

    千次阅读 2019-09-24 11:25:56
    源码地址 ...    ...为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。...终止色就是你想让Gecko去...小程序新增面相分析要不要体验一下哦 打开微信扫一扫    
  • 简单的微信小程序产品详情页面的实现。 包含封面、多查看、简介。 封面为图片+透明渐变色图层样式。 代码完整,注释详细。
  • 主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • keyframes 规则-改变颜色和位置微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua通用语法网页代码div{width:100px;height:100px;background:red;position:...
  • 微信小程序点击按钮修改背景颜色
  • 微信小程序 透明渐变色封面的实现

    千次阅读 2020-01-20 19:25:55
    真机效果(vivo nex) index.wxml <!--pages/Home/index.wxml--> <!-- 全屏背景色统一 --> <view style="background-color:{{apk.background}};...view class="cover" wx:if...
  • 主要介绍了微信小程序实现默认第一个选中变色效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序点击切换背景颜色按钮

    千次阅读 2018-09-18 15:46:45
    一.wxml页面设计代码: &lt;view class='top_view' style='color:{{pageBackgroundColor}}'&gt;欢迎来到休闲游戏页面&...点击切换背景颜色&lt;/view&gt;   二.js控制颜色的变化代码: ...
  • 前端(微信小程序)渐变色

    万次阅读 2018-04-20 09:23:52
    CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)...
  • 直接上代码 wxml {num== 1?'active':''}}" bindtap="btnbianse1"> ¥1200及以下 {num == 2?'active':''}}" bindtap="btnbianse2"> ¥1200-1600 {num== 3?'active':''}}" bindtap="btnbianse3... } 效果点击变色
  • .wx-progress-inner-bar { border-radius: 6px !important; background:linear-gradient(to right,#05A081,#87CBCB); }
  • 主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下
  • 微信小程序中的渐变色

    千次阅读 多人点赞 2019-03-06 00:27:42
    前言 更多内容,请访问我的 个人博客。 CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。...CSS3 定义了两种类型的渐变(gradients): ...线性渐变(Linear Gradients)- 向下/向上/向左/向...
  • 微信小程序常见问题】点击指定文字实现指定文字变色解决方案一

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,946
精华内容 778
关键字:

微信小程序点击变色

微信小程序 订阅