zoukankan      html  css  js  c++  java
  • 小程序轮播图

    html部分

    <view class="container">
    <view class="swiper">
    <swiper indicator-dots="{{indicatorDots}}
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for-items="{{banner_url}}" wx:key="item.id">
    <swiper-item>
    <block wx:if="{{item}}">
    <image src="{{item}}" mode="aspectFill"/>
    </block>
    <!-- 图片不显示时显示得默认图片 -->
    <block wx:else>
    <image src="../../images/default_pic.png" mode="aspectFill"></image>
    </block>

    </swiper-item>
    </block>
    </swiper>
    </view>
    </view>
     
    data.js部分
    function getBannerData() {
    // images路径以index.js相对于images文件夹得位置来写
    var imgUrls = [
    '../../images/banner_01.png', '../../images/banner_02.png', '../../images/banner_03.png', '../../images/banner_04.png'
    ]
    return imgUrls
    }
    // 用module.exports把getBannerData()方法暴漏出来
    module.exports.getBannerData = getBannerData

    // 以json数据格式暴漏出来方便多个方法暴漏使用
    module.exports = { getBannerData: getBannerData}
     
     
    index.js部分
    //index.js
    //获取应用实例
    const app = getApp()

    // 把data.js引用过来使用
    var fileData = require ('../../utils/data.js')

    Page({
    data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    banner_url: fileData.getBannerData(),
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    },
    //事件处理函数
    bindViewTap: function() {
    wx.navigateTo({
    url: '../logs/logs'
    })
    },
    onLoad: function () {
    // console.log(fileData)
    if (app.globalData.userInfo) {
    this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
    })
    } else if (this.data.canIUse){
    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
    // 所以此处加入 callback 以防止这种情况
    app.userInfoReadyCallback = res => {
    this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
    })
    }
    } else {
    // 在没有 open-type=getUserInfo 版本的兼容处理
    wx.getUserInfo({
    success: res => {
    app.globalData.userInfo = res.userInfo
    this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
    })
    }
    })
    }
     
    },
     
    }
    })
     
  • 相关阅读:
    geodatabase在sql server和Oracle上的应用
    python:AttributeError: module 'xxxx' has no attribute 'xxxxx'
    sql server复制一张表到另一张表
    pyodbc:Python使用pyodbc访问数据库操作方法
    python如何生成token
    WebGIS应用案例
    SAP UI5 里如何让每次视图显示时都执行某方法
    使用开源微前端框架 Luigi 创建一个基于微前端架构的工程
    关于 SAP 产品 UI 的搜索引擎优化 SEO
    Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools
  • 原文地址:https://www.cnblogs.com/yaomengli/p/9070968.html
Copyright © 2011-2022 走看看