精华内容
下载资源
问答
  • 微信小程序动画之点击效果的具体代码,供大家参考,具体内容如下 代码: js: // pages/test/test.js Page({ containerTap: function (res) { var that = this var x = res.touches[0].pageX; var y = res....
  • 微信小程序图片点击切换和收藏功能是非常常用的!有更好写法的请留言,喜欢小程序和web前端开发的请加我微信Angelo_Sifan效果图如下1 <image catchtap='onCollectionTap' wx:if="{{collected}}" ...

    微信小程序图片点击切换和收藏功能是非常常用的!有更好写法的请留言,喜欢小程序和web前端开发的请加我微信Angelo_Sifan

    效果图如下

    1  <image  catchtap='onCollectionTap' wx:if="{{collected}}" src="/images/icon/collect1.png"></image>
    2       <image wx:else catchtap='onCollectionTap' src="/images/icon/collect.png"></image>

    首先对Image绑定相应变量,选用catchxxx而不选用bindxxx进行绑定是因为,catch不会出发冒泡事件就不会向父节点传递,写的过程中一定要用wx:if和wx:else来进行判断。然后我们还需要在JS中对onCollectionTap变量进行定义,最后当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    /*这是对应的JS文件*/
      2 Page({
      3 data: {
      4
      5     },
      6     onLoad:  function  (option) {
      7      var  postId = option.id; //要先在对应的数据文本中对每个栏目定义postId、比如postId: 0 postId:1
      8      this .data.currentPostId = postId;  //借助顶部data作为中转,拿到上面这行postid后,将它放到下面var postCollected = postsCollected[]中
      9          //将这个postId从onLoad中传递到下面的onCollectionTap中
    10          var  postData = postsData.postList[postId]; //定义每个新闻列表对应顺序是哪个新闻内容
    11
    12  //用户收藏功能
    14         var  postsCollected = wx.getStorageSync( 'posts_collected' //从缓存中读取所有的缓存状态
    15          if  (postsCollected) {    //postsCollected为真的情况,在缓存中存在
    16              var  postCollected = postsCollected[postId] //读取其中一个缓存状态
    17              this .setData({
    18                 collected: postCollected  //将是否被收藏的状态上绑定到collected这个变量上
    19             })
    20         }
    21          else  {        //为假的情况,缓存中为空的情况
    22              var  postsCollected = { };  //对postsCollected进行一个赋值操作,从而防止为空,从而省掉后面对它是否为空进行测试的步骤
    23             postsCollected[postId] =  false // 让当前的这篇文章状态为false,从而收藏星星不点亮
    24             wx.setStorageSync( 'posts_collected' , postsCollected); //将postsCollected对象放到缓存中
    25         }
    26     },
    27     onCollectionTap:  function  (event) {     // 定义onCollectionTap事件用来确定文章是否收藏,如果没收藏就能点亮星星进行收藏
    28          var  postsCollected = wx.getStorageSync( 'posts_collected' );    //获取缓存的方法
    29          var  postCollected = postsCollected[ this .data.currentPostId];    //确定当前文章是否有缓存的状态,传递参数方法、借助其他参数来传递变量,如上的data
    30         postCollected = !postCollected; // 取反操作,收藏变成未收藏、未收藏变为收藏
    31         postsCollected[ this .data.currentPostId] = postCollected; //整体缓存的某一篇文章的缓存值等于postCollected从而更新一个变量
    32         wx.setStorageSync( 'posts_collected' , postsCollected); //更新文章是否收藏的缓存值,相当于在数据库中做了一次更新。
    33          //更新Data的数据绑定变量,从而实现图片切换
    34          this .setData({
    35             collected: postCollected  //当前的collected为postCollected
    36         })
    37     }
    38 )}



    原文链接:https://www.cnblogs.com/EdisonVan/p/9027535.html

    展开全文
  • 微信小程序点击图片切换图片

    万次阅读 多人点赞 2019-04-19 13:25:08
    1 使用wx:if写2个图片 点击的显示一张即可, 2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view class="intro"> <image catchtap='open_tap' wx:if="{{isShow}}" src="/images/...

    实现的效果图

     

    实现的方式有2中 先说下思路

    1 使用wx:if 写2个图片 点击的显示一张即可,

    2 使用数据传递当拿到图片的时候更换图片即可.

    看下代码

    2中方式:xml

    <view class="intro">

    <image catchtap='open_tap' wx:if="{{isShow}}" src="/images/icon_flashlight_open.png" class="coding_flash_image"></image>

    <image wx:else catchtap='close_tap' src='/images/icon_flashlight_close.png' class="coding_flash_image"></image>

    <view>

    <image catchtap='open' wx:if="{{iShow}}" src="{{url}}" data-msg="{{url}}" class="coding_flash_image"></image>

    </view>

    </view>

     

    js中

    data: {

    isShow:false,

    url:"../images/icon_flashlight_close.png",

    iShow:true

    },

     

    close_tap:function(){

    this.setData({

    isShow:true

    })

    },

    open_tap:function(){

    this.setData({

    isShow: false

    })

    },

     

    open:function(res){

    console.log(res);

    let url

    if (res.currentTarget.dataset.msg =="../images/icon_flashlight_close.png"){

    url ="../images/icon_flashlight_open.png"

    }else{

    url ="../images/icon_flashlight_close.png"

    }

    this.setData({

    url:url

    })

    },

    方式2 使用的时候需要先打印下值

    就可拿到值了

    给出demo地址参考

    demo地址如果帮助了您,希望给一个免费的star

     

    展开全文
  • 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talk...
  • wxml界面使用image标签 <image wx:if={{collected}} catchtap='onCollectionTap' src='/images/icon/collection.png'></image> <image src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></...
  • 微信小程序的页面图片全屏滑动切换,全屏动画滚动,用手在屏幕上轻轻滑动,图片就滚动,类似于网页中的幻灯片切换效果,增加操作的乐趣性和美观度,是个不错的图片浏览特效。相关参数定义如下:  scrollindex:0, ...
  • 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法实现效果:背景图片:.wxml文件view plaincopyviewclass="chose-txt"data-price="{{item.price}}"data-id="{{index}}"bindtap="choseTxtColor"style="{{in...
  • 主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序选项卡页面tabBar切换,现在贡献出代码,希望可以帮助到你们
  • 下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示: 方法一:button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边。 方法二:background-image background-...
  • 普通的web开发可以通过JavaScript获取HTML的Dom结构,但是小程序不可以,小程序实现此功能的方式:数据绑定+data- 去更改标签类名。step 1 给选定的标志 {{}} &amp; data-num此处只绑定了一个类名,也可以绑定N...

    普通的web开发可以通过JavaScript获取HTML的Dom结构,但是小程序不可以,小程序实现此功能的方式:数据绑定+data- 去更改标签类名。

    step 1 给选定的标志 {{}} & data-num

    此处只绑定了一个类名,也可以绑定N个类名。

    
        
    1. class='class1 class2 {{num==1?"active":""}}'
    2. <view class='oil_s' catchtap='changeOil'>
    3. <view class='{{num==1?"active":""}}' data-num='1'>92#汽油</view>
    4. <view class='{{num==2?"active":""}}' data-num='2'>95#汽油</view>
    5. <view class='{{num==3?"active":""}}' data-num='3'>0#汽油</view>

    绑定一个事件 可以给外面的块绑定,也可以给每一个里边的view绑定,如下:

    
        
    1. <view class='oil_s' >
    2. <view class='{{num==1?"active":""}}' data-num='1' catchtap='changeOil'>92#汽油</view>
    3. <view class='{{num==2?"active":""}}' data-num='2' catchtap='changeOil'>95#汽油</view>
    4. <view class='{{num==3?"active":""}}' data-num='3' catchtap='changeOil'>0#汽油</view>
    5. </view>

    唯一的区别是给事件传入的 e 不同。 
    绑定在外面的块的事件的e ,只有 target才会有dataset的值。 
    绑定给每一个小块的事件的e ,不管是 target还是currentTarget都会有dataset的值。 

    e.target.dataset.num 
    step 2 写好初始值

    一开始选定哪一个,就给判断的那个变量哪个值

    
        
    1. data: {
    2. num:1
    3. },

    step 3 写好事件处理函数

    
        
    1. changeOil:function(e){
    2. console.log(e);
    3. this.setData({
    4. num:e.target.dataset.num
    5. })
    6. }

    原理 是改变一下 用来判断的那个变量 num 的值而已。

    他人的做法:

    我用的类名active ,有的人会用cur ,【current的简写】 
    有人甚至总结出了三种方式:

    
        
    1. 1.通过修改类名 <view class="{{className}}"></view>
    2. 2.添加一个类名,覆盖前面的样式 <view class="helplist {{cur}}"></view>
    3. 3.修改行内样式,覆盖前面的样式 <view class="helplist" style="{{currentStyle}}"></view>

    第二种方式跟我的一样,第三种方式最好不要使用,毕竟我们要做一个性能佳的小程序。 
    至此,完成。 

    效果图


    作者:Benny_lzb
    链接:微信小程序 点击切换样式的功能实现
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    展开全文
  • 主要为大家详细介绍了微信小程序实现图片选择并预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。 实现 1. 绑定回调 通过...
  • 点击利用缓存实现收藏成功和取消收藏 onLoad: function (options) { var postsCollected = wx.getStorageSync('posts_collected') if(postsCollected){ var postCollected = postsCollected[postId] this.setDa....

    在这里插入图片描述
    在这里插入图片描述

    点击利用缓存实现收藏成功和取消收藏

    onLoad: function (options) {
        var postsCollected = wx.getStorageSync('posts_collected')
        if(postsCollected){
          var postCollected = postsCollected[postId]
          this.setData({
            collected:postCollected
          })
        }else{
          var postsCollected = {}
          postsCollected[postId] = false;
          wx.setStorageSync('posts_collected', postsCollected)
        }
      },
    
    onCollectonTap:function(event){
        var postsCollected = wx.getStorageSync('posts_collected');
        var postCollected = postsCollected[this.data.collId];
        console.log(postCollected)
        postCollected =! postCollected;
        postsCollected[this.data.collId] = postCollected;
        wx.setStorageSync('posts_collected', postsCollected);
        this.setData({
          collected:postCollected
        })
        wx.showToast({
          title: postCollected?"收藏成功":"取消成功",
        })
      },
    
    <image wx:if="{{collected}}" catch:tap="onCollectonTap" src="/images/icon/mkk1.png"></image>
     <image wx:else catch:tap="onCollectonTap" src="/images/icon/mk1.png"></image>
    
    展开全文
  • 主要为大家详细介绍了微信小程序实现点击生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 动画效果:   wxml: <!--正面的框 --> <image xss=removed></image> <!--背面的框 --> <image xss=removed></image>
  • 本文实例讲述了微信小程序实现分享朋友圈的图片功能。分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅...
  • 网上搜集了各方面的资料,加上自己查阅的API文档,在video里面不能直接设置style样式,必须要在wxss里面设置大小才行,碰了很多壁,希望对大家有帮助;如果有问题欢迎留言哦~~
  • 本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: <image class=upload_Item_img src=../../image/test1.jpg></image> <image ...
  • 本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码如下: wxml页面 {{item}}
  • 点击照片实现切换点击前: 点击后: 两种方法:1.
  • 我们来看一下效果 接下来我们一起来看看怎么实现的吧 wxml {{bookAddBookrackSucceed}} {{bookAddBookrack}} 在wxml中一个简单的判断默认为ture,判断为false切换图标文字 主要部分js data: { addBookrackSucceed: ...
  • 微信小程序点击更换图片

    千次阅读 2017-02-05 11:29:00
    // 点击选择代买平台 daimaiClick: function(e){ console.log("-------d:"+this.data.daimaisrc); if(this.data.daimaisrc=="../../../images/cart2_xz02.png"){ this.setData({ daimaisrc: "../../../images...
  • 微信小程序仿探探翻图片,左右滑动图片消失,可自由拖动
  • 本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 ...
  • 微信小程序 图片显示切换

    千次阅读 2018-11-15 22:04:17
    比如我们常用的收藏功能,当你收藏了后就显示收藏后的图片,没有收藏一般显示一个比较浅点的颜色,那么这个功能在小程序如何实现呢?因为小程序的组件数据都是绑定的,一般这么写: &lt;image wx:if="{{...
  • 之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,861
精华内容 7,544
关键字:

微信小程序点击切换图片

微信小程序 订阅