2018-11-24 23:20:54 qq_28263253 阅读数 267
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4269 人正在学习 去看看 翟东平

微信小程序中轮播图的实现

最近在使用WePY框架开发一款微信小程序,下面是记录的在首页中实现一个图片轮播功能的具体实现。
1.template中使用swiper标签。

    <swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
      <block wx:for="{{imgUrls}}" wx:key="key">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>

2.script中定义一个data。

  data = {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    indicatorActiveColor: '#fff',
    imgUrls: [
      '../images/swiper1.jpg',
      '../images/swiper2.jpg',
      '../images/swiper3.jpg',
      '../images/swiper4.jpg'
    ]
  }
2019-07-16 16:01:16 weixin_44268473 阅读数 2709
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4269 人正在学习 去看看 翟东平

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>

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

2017-06-29 11:22:31 yanglei0917 阅读数 3245
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4269 人正在学习 去看看 翟东平
微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍

这里写图片描述

这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性 都列出来了 我们用的时候直接用就可以了 
接下来,再看一下网络请求的API,这里我们用到的是GET 请求,我们开一下微信小程序官方给我们的API

这里写图片描述
这里写图片描述

 接下来就是开启我们小程序轮播图之旅了,附上一张效果图

这里写图片描述
首先,我们看一下我们的index.wxml文件


<view>
 <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
    <block wx:for="{{images}}">
      <swiper-item>
        <image src="{{item.picurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

index.js文件


var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //是否显示指示点 true 显示 false 不显示
    indicatorDots: true,
    //控制方向
    vertical: false,
    //是否自动切换
    autoplay: true,
    //自动切换时间间隔
    interval: 3000,
    //滑动动画时长
    duration: 1000,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
    //网络请求 GET方法
    wx.request({
      url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
      method: 'GET',
      data: {},
      header: {
        'Accept': 'application/json'
      },
      //成功后的回调
      success: function (res) {
        console.log('11111' + res),
          that.setData({
            images: res.data
          })
      }
    })
  }
})

index.wxss 这里就是简单的控制了一下显示的样式

.swiper_box {
    width: 100%;
}

swiper-item image {
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
2019-06-17 14:03:18 qq_41709494 阅读数 65
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4269 人正在学习 去看看 翟东平

微信小程序官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

在编辑器的pages的index文件夹中的wxml文件,wxss文件(可选页面),js文件(可选页面),json文件(可选页面)

wxml文件:用于构建当前页面的结构,包括组件、事件的等内容,用户最终看到的页面效果就是由该文件显示出来

wxss文件:用于设置当前页面的样式效果,该文件规定的样式会覆盖app.wxss全局样式表中产生冲突的规定,但不会影响其他页面

js文件:用于设置当前页面的逻辑代码

json文件:用来重新设置app.json中window属性规定的内容,新设置的选项只会显示在当前页面上,不会影响其他页面

1.用index文件夹的页面 

 

2.把原来的 index.wxml都清空,滑块视图容器:<swiper>

<swiper>
<swiper-item>
<image src='http://pic2.sc.chinaz.com/Files/pic/pic9/201906/bpic12141_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='http://pic.sc.chinaz.com/Files/pic/pic9/201905/hpic999_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='https://cdn.pixabay.com/photo/2019/06/13/11/23/landscape-4271367__340.jpg'></image>
</swiper-item>
</swiper>

 

3.实现效果就是三张图片可以滚动

 

 

 

4. 根据官方文档实现面板指示点

5.类型是boolean,判断是false(关闭),还是true(开启)

<swiper indicator-dots="{{true}}">
<swiper-item>
<image src='http://pic2.sc.chinaz.com/Files/pic/pic9/201906/bpic12141_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='http://pic.sc.chinaz.com/Files/pic/pic9/201905/hpic999_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='https://cdn.pixabay.com/photo/2019/06/13/11/23/landscape-4271367__340.jpg'></image>
</swiper-item>
 </swiper>

5-1.实现效果 

 

 6.根据官方文档,实现自动切换

<swiper indicator-dots="{{true}}" autoplay="{{true}}">
<swiper-item>
<image src='http://pic2.sc.chinaz.com/Files/pic/pic9/201906/bpic12141_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='http://pic.sc.chinaz.com/Files/pic/pic9/201905/hpic999_s.jpg'></image>
</swiper-item>
<swiper-item>
<image src='https://cdn.pixabay.com/photo/2019/06/13/11/23/landscape-4271367__340.jpg'></image>
</swiper-item>
 </swiper>

 

 

 

 

 

 

2018-03-23 15:46:36 Winnie_chenqian 阅读数 933
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4269 人正在学习 去看看 翟东平

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

.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 () {    }   
}) 

index.WXML

/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}
谢谢大家阅读,请大家多多支持!

微信小程序--轮播图

阅读数 12426

没有更多推荐了,返回首页