2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

项目实战-点餐小程序-13 首页(轮播图)

小程序点餐轮播图作者:残念

一、首页轮播图的主要功能新直能分支调二浏页器朋代说

1.使用swiper和swiper-item组件

2.动态获取后台的轮播图照片

3.改变小程序默认的swiper显示高度

 

二、首页轮中比需抖接朋功要朋插播图的代码

1.home.wxm比抖朋要插支一圈不者地l

1 <!-- 首页轮播图 -->
2 <swiper遇新是直朋能到 indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" circular="true" style='height:{{bannerHeight}}'>
3 <swiper遇新是直朋能到分览支体调-item wx:for="{{bannerList}}" >
4 <image src="{{item.picUrl}}"  mode="widthFix" bindload="imageLoad" ></image>
5 </swiper-item>
6 </swiper>

2.home.wxs比抖朋要插支一圈不者地s

1 swiper遇新是直朋能到 image{
2   width: 100%;
3 }

3.home遇新是直朋能到分览.js

Page({

  //页面的初始数据

  data: {
    //自定义数组,存放banner显示在页面上
    bannerList:[],
    //所有banner图片的高度
    bannerHeight: '',
  },

  onLoad: function (options) {
    //获取轮播图
    wx.cloud.database().collection("lunbotu")
    .get()
    .then(res=>{
      console.log("获取轮播图成功",res);
      this.setData({
        bannerList:res.data
      })
    })
    .catch(err=>{
      console.log("获取轮播图失败",err);
    })
  },

  //设置swiper的高度
  imageLoad(e){
    //获取当前屏幕的宽度
    let screenWidth = wx.getSystemInfoSync().windowWidth;
    console.log("获取图片的真实宽度",e.detail.width);
    console.log("获取图片的真实高度",e.detail.height);
    let imgWidth = e.detail.width //图片的真实宽度
    let imgHeight = e.detail.height //图片的真实高度
    //等比设置swiper的高度
    let swiperHeight = (screenWidth/imgWidth)*imgHeight+ "px"
    this.setData({
      bannerHeight:swiperHeight
    })
  },

})

三、首页轮中比需抖接朋功要朋插播图的效果

 

 

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:第 10 题:谈谈你对静态布局、自适应布局、响应式布局、弹性布局、流式布局的理解?
» 下一篇:项目实战-点餐小程序-14 首页(搜索菜品)
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段