微信小程序 解决swiper不显示图片的方法

微信小程序 解决swiper不显示图片的方法

1.我说的swiper不显示图片是只有一个swiper的框,但不显示设置好的图片。

第一个要确定的是图片路径设置的正不正确,确定路径没有设置错,还有一个可能的原因就是,放swiper的这个页面(也就是这个wxml文件)没有在app.json里面的pages进行注册

确决的方法是:

找到项目下的app.json文件

在app.json的配置文件下的pages进行页面注册,像下面图片这样

小程序的文档也写了“小程序中新增/减少页面,都需要对 pages 数组进行修改。“

我也是初学的时候忽略了这个问题,搞了好长时间,突然想起了这块,在pages中添加的页面之后就好使了

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-01-02

微信小程序中的swiper组件详解

微信小程序中的swiper组件 微信小程序中的swiper组件真的是简单方便 提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

微信小程序--组件(swiper)详细介绍

根据微信小程序官网提供的示例进行操作并进行总结: swiper 主要设置的属性 index.WXML 的设置: index.js设置: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换 实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view

微信小程序 轮播图swiper详解及实例(源码下载)

微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

微信小程序 教程之wxapp视图容器 swiper

相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view 微信小程序视图容器:swiper ​滑动面板 ​滑动面板 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的index interval Number 5000

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

微信小程序(十)swiper组件详细介绍

Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml <!--是否显示圆点,自动播放, 间隔时间, 监听滚动和点击事件--> <swiper indicator-dot

微信小程序 仿美团分类菜单 swiper分类菜单

有同学要仿美团分类菜单.写了一个. 跟 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似 代码: js就这么一点 //index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) {

微信小程序 swiper组件详解及实例代码

微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx

微信小程序 WXDropDownMenu组件详解及实例代码

微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

微信小程序 video组件详解及实例代码

视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton">点击显示视频组件</button> <!--视频组件src资源地址,binderror为监听错误信息--> <video src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4&q

微信小程序 progress组件详解及实例代码

主要属性: 效果图: ml: <View > <!--百分比是30,并在进度条右侧显示百分比--> <Text class="text-style">百分比是30,并在进度条右侧显示百分比</Text> <progress percent="30" show-info /> <!--百分比是40,进度条线的宽度12px--> <Text class="text-style&quo

微信小程序 require机制详解及实例代码

微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

微信小程序 template模板详解及实例代码

微信小程序 template模板详解 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板 一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b

微信小程序 canvas API详解及实例代码

绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基

微信小程序 animation API详解及实例代码

动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. wx.createAnimation(object) 看官方介绍 1.创建一个动画实例animation.调用实例的方法来描述动画.最后通过动画实例的export方法导出动画数据传递给组件的animation属性. 2.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画

微信小程序 Audio API详解及实例代码

没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.wx.playBackgroundAudio(object)播放音乐 3.wx.pauseBackgroundAudio()暂停音乐 4.wx.seekBackgroundAudio(object) 设置播放进度 5.wx.stopBackgroundAudio()停止播放音乐 三个监听器: wxml <button type="primary&qu

微信小程序 Record API详解及实例代码

其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们完善.以后再测和补充吧!!!! 主要属性: wx.startRecord(object) 手动调用wx.stopRecord()停止录音 wxml <!--用于记录时间--> <text>{{formatRecordTime}}</text> <button type="primary" bindt