微信开发小程序 轮播图_为什么用微信开发者工具写的微信小程序轮播图在手机上显示不出来 - CSDN
  • 微信小程序 轮播图 swiper图片组件

    万次阅读 2016-10-13 21:47:46
    照着开发文档尝试,总是能有所收获....今天尝试微信小程序开发轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml

     照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.


    上图就是一个简易的轮播图,是不是很简易.23333

    主要是代码也很简单.

    1.index.wxml

    <!--index.wxml-->  
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
          <block wx:for="{{movies}}" wx:for-index="index">  
            <swiper-item>  
              <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
            </swiper-item>  
          </block>  
        </swiper>  
    这里有几个属性需要说明.


    微信小程序开发的循环用到了<block wx:for >

    我这里是遍历movies[]数组.<swiper-item>就是item

    2.index.js

    //index.js  
    //获取应用实例  
    var app = getApp()  
    Page({  
      data: {  
        movies:[  
        {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
        {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
        {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
        {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
        ]  
      },  
      onLoad: function () {  
      }  
    })  

    3.WXML

    /**index.wxss**/
    .swiper {
      height: 400rpx;
      width: 100%;
    }
    .swiper image {
      height: 100%;
      width: 100%;
    }

    WXSS不多说,跟CSS没啥区别.

    不明白的看看开发文档

    http://blog.csdn.net/qq_31383345

    展开全文
  • 微信小程序实现轮播图(超简单)

    万次阅读 2019-07-16 16:10:43
    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小...微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,s...

    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小程序语法写(view、swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果。

    效果图:

    微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件)

    <style type="less" scoped="scoped">
       .swiper image {
          width: 100%;
          height: auto;
      }
    
        .swiper-image {
          height: 100%;
          width: 100%;
        }
    
        .slide-image {
          height: 100%;
          width: 100%;
          display: block;
        }
    </style>
    <template>
         <view class="swiper">
            <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}"
                style="height:{{imgheights[current]}}rpx;">
                <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">
                   <swiper-item>
                        <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />
                   </swiper-item>
                 </block>
             </swiper>
         </view>
    </template>
    <script>
      import wepy from '@wepy/core'
      wepy.page({
        data: {
          circular: true,
          //是否显示画板指示点,根据图片数量自动生成多少个圆点
          indicatorDots: true,
          //选中点的颜色
          //是否竖直
          vertical: false,
          //是否自动切换
          autoplay: true,
          //自动切换的间隔
          interval: 3000,
          //滑动动画时长毫秒
          duration: 1000,
          //所有图片的高度
          imgheights: [],
          //图片宽度
          imgwidth: 320,
          //默认
          current: 0
        },
        imageLoad: function(e) { //获取图片真实宽度
          var imgwidth = e.detail.width,
            imgheight = e.detail.height,
            //宽高比
            ratio = imgwidth / imgheight;
          console.log(imgwidth, imgheight)
          //计算的高度值
          var viewHeight = 750 / ratio;
          var imgheight = viewHeight;
          var imgheights = this.data.imgheights;
          //把每一张图片的对应的高度记录到数组里
          imgheights[e.target.dataset.id] = imgheight;
          this.setData({
            imgheights: imgheights
          })
        },
        bindchange: function(e) {
          // console.log(e.detail.current)
          this.setData({
            current: e.detail.current
          })
        }
      })
    </script>
    

    将代码粘过去之后,只需要修改循环对象为图片数据就可以了。

    展开全文
  • 三分钟实现微信小程序轮播图

    千次阅读 2018-03-28 21:53:14
    小程序轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序轮播图呢1.index.wxml&lt;!--index.wxml--&gt; &lt;swiper class="swiper" indicator-...

    生命不息,代码不止.

    在Android的项目完成后,接下来的半个月,要完成一款配套的微信小程序.

    那就开始动手呗.

    小程序的轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序的轮播图呢

    1.index.wxml


    <!--index.wxml-->
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{movies}}" wx:for-index="index">
    <swiper-item>
    <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
    </swiper-item>
    </block>
    </swiper>

    2.index.js

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
    data: {
    movies:[
    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,
    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,
    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,
    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}
    ]
    },
    onLoad: function () {
    }
    })

    3.index.wxss

    /**index.wxss**/
    .swiper {
    height: 400rpx;
    width: 100%;
    }
    .swiper image {
    height: 100%;
    width: 100%;
    }


    附一下官方文档的地址:

    微信小程序轮播组件官方文档

    看一下最终效果.妥了


    展开全文
  • 微信小程序3D轮播图实现

    万次阅读 2019-09-23 17:58:25
    好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于复制粘贴,h5以前...

    好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于复制粘贴,h5以前也就看看,所以针对css样式和div之类的没有什么感觉,基本一切从0开始,好了,扯淡完毕-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    刚看了2天的小程序,咱们几个就开始上手开撸,不得不说微信的小程序封装的还是挺全面的,其实也就是间接的说很多东西都封装的比较死板,UI希望首页的banner实现各种形式的3D轮播图的效果,请看效果图

    其实在app里面这种效果还是比较常见的,开源库也比较多,但是作为资深伸手党的我,居然没有搜索到实现3D轮播图的实例,好吧,只能自己开撸了,我的方式是基于原生的Swiper来实现的,配合previous-margin next-margin来实现左右两边的边框缩进效果,好了这只是第一步,第二部就是实现缩放的动画了效果了,我自己总结了两种方法,

    第一种:通过css中控制选中和没有选中的swiper做监听,修改对应的css的样式,这时候需要对swpier做onChange监听,来改变选中的index角标,这个变量要写在data层里面,让直行img的时候能动态获取到xIndex的值,执行不同的css样式,这种方式通过设置img的高度来实现,选中设置100%的高度,没有选中的设置高度为90%,代码如下

     <view class='bannerWrap'>
        <image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image>
        <swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
          <block wx:for="{{banner}}">
            <swiper-item>
              <image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
    
    
    
    .imageBanner {
      width: 100%;
      height: 100%;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    
    
    .imageBanner_small {
      width: 94%;
      height: 90%;
      margin-left: 20rpx;
      margin-right: 20rpx;
      position: absolute;
      bottom: 0;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx; 
    
    }
    
    
    
    
    
    
    
    
    
    
    

    第二种方法:

    原理基本相同,只不过改变图片大小的时候利用的css的trasnform和trasnsition来实现界面动画的放大和缩小的过程的一个切换,具体代码就是css的样式做了一个切换

    具体代码如下

    .imageBanner {
      width: 100%;
      height: 100%;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    
    .imageBanner_small {
      height: 100%;
      transform: scale(0.9);
      transition: all 0.2s ease-in 0s;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;
      bottom: -13rpx;
      margin-left: -10rpx;
      position: absolute;
     
    }

    下面看下具体实现的效果图吧

    今天比较忙,等稍微闲点的时候将对应的demo会上传供各位大佬参考,刚刚做小程序,实现的效果可能比较low,但是能解决目前遇到的问题,如果哪位大佬有更加好的实现方式,希望不吝赐教!

    终于在一位兄弟的督促下把demo上传了,贴上地址

    https://github.com/WinWang/WeChatBanner/tree/master

    展开全文
  • 微信小程序开发 轮播图 [云开发文档]:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html 我的git小程序代码地址:https://github.com/daimananshen/muCeGoodTime app.js 页面中...
  • 微信小程序 自定义轮播图指示点位置 .wx-swiper-dots { position: relative; left: unset !important; right: 0; } .wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: -5rpx; }
  • <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}" interval="2000"> <swiper-item class="" item-id=""> <image class="" src=...
  • 微信小程序轮播图要用到swiper组件,即滑块视图容器 wxml代码 &lt;view&gt; &lt;swiper autoplay='true' current="{{swiperCurrent}}" interval='5000' duration='200' bindchange='...
  • 效果: 实现代码: wxml <view class="card card_b"> <swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" ...
  • 效果,图片显示不出来 ![图片说明](https://img-ask.csdn.net/upload/201711/29/1511944537_676068.png) wxml ![图片说明](https://img-ask.csdn.net/upload/201711/29/1511944481_437507.png) wxss ![图片说明]...
  • 项目简介:一个商城小程序 需求场景:在首页加一个轮播图轮播图包含多个视频和多张图片,视频播放,图片页面跳转页面 实现技术:swiper 思路(一):刚开始写的时候,用的是将video直接嵌套在swiper-item里面,...
  • 1.wxml 文件 <block wx:for="{{data.gallery}}" wx:key="index"> <swiper-item> <image class="wh" src="{{item.image_url}}" bindload="setContainerHeight" /> </swip
  • 微信小程序轮播图,导航栏

    千次阅读 2019-07-06 12:20:50
    一个小程序的基本目录结构如下: project ├── pages | ├── index | | ├── index.json index 页面配置 | ...
  • 1.轮播图外层容器swiper,每一个轮播项swiper-item 2.swiper标签存在默认样式 width 100% height 150px image 存在默认宽度和高度 320*240 swiper 高度无法实现由内容撑开 3.综上,需先根据原图的宽度和高度 等比例给...
  • 我们先来看一下效果吧 ...-- 轮播图 S --> <swiper class="detail-banner" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{durat...
  • 微信小程序轮播图

    2019-06-17 14:03:18
    微信小程序官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 在编辑器的pages的index文件夹中的wxml文件,wxss文件(可选页面),js文件(可选页面),json文件(可选页面) ...
  • 不管是做APP开发还是小程序,移动端离不开轮播图的功能,下面就写一个小程序轮播图功能分享给大家 效果图: step1:页面index.wxml代码 <!--index.wxml--> <view class="container"> <!--轮播图--...
  • 微信小程序实现图片轮播:使用 小程序原生组件swiper和swiper-item来实现。 一、官方文档中swiper和swiper-item的介绍: Swiper 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 Swiper-item ...
  • 照着开发文档尝试,总是能有所收获.之前做Android[/url]开发,做个轮播...今天尝试微信小程序开发轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也
  • .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: 2rpx; } .swiper-box .wx-swiper-dot{ width:40rpx; display: inline-flex; height: 4rpx;...justify-content:s...
1 2 3 4 5 ... 20
收藏数 4,331
精华内容 1,732
关键字:

微信开发小程序 轮播图