swiper

本项目中前端采用 APICloud AVM 多端开发技术进行企业app开发，要点包括 TabLayout 布局、swiper 轮播图、rich-text 富文本、scroll-view 滚动视图、下拉刷新等。 项目后端则是使用的 APICloud 数据云 3.0 自定义云函数来构建的。 使用APICloud 多端技术进行企业app开发，实现一套代码多端运行，支持编译成 Android & iOS App 以及微信小程序。项目源码在 https://github.com/apicloudcom/company-display 仓库的 widget 目录下。 使用步骤： 使用 APICloud Studio 3 作为开发工具。 下载本项目源码。 在开发工具中新建项目，并将本源码导入新建的项目中，注意更新，config.xml 中的 appid 为你项目的 appid。 使用 AppLoader 进行真机同步调试预览。 或者提交项目源码，并为当前项目云编译自定义 Loader 进行真机同步调试预览。 云编译 生成 Android & iOS App以及微信小程序源码包。 如果之前未接触过 APICloud 开发，建议先了解一个简单项目的初始化、预览、调试和打包等操作，请参考 APICloud 多端开发快速上手教程 。 网络请求接口封装 在 utils/model.js 中

iscroll的dom元素的结构是固定的，swiper是容器，scroll是需要滚动的容器，list是滚动的内容 <div class = " swiper " > <div class = " scroll " > <div class = " list " ></div> </div> </div> tips： 1、swiper定位必须为relative，并且高度设置固定值，overflow:hidden; 2、swiper的高度一定要小于scroll的高度 3、初始化uiscroll时，元素必须是显示的状态， 4、如果底部还是无法拉上去，查看list中的每个item之间是否有padding，margin(如果是上下滑动，则查看上下)，取消padding和margin 5、scroll 是你想要在多大的容器里滚动，list是真正要滚动的内容，所以scrollbar 设置为list 6、使用scroll 上下滚动到指定高度的时候，使用scrollTo,要判断最大的滚动距离maxScrollY，如果超出这个距离，会先滚到这个位置后再返回回去。 我的案例，页面中有个div容器，里面设置了两个tab，点击相互切换。div容器设置为隐藏，当点击页面中的某个按钮时，显示该div。我在页面渲染完成后，就初始化了iscroll，但是发现div滑动不了（只要一放手就回弹到初始位置）。

7insummer/orange-can: 《微信小程序入门与实践》一书小程序源代码 一般大家惯用的做法是 HTML 用双引号，JS 用单引号，这样在 JS 中拼 HTML 片段不用转义 elem.innerHTML = '<div class="post"></div>'; 数据绑定 DATA BINDING 在真实项目中，业务数据通常放置在自己服务器中，通过http请求访问服务器提供的 RESTful API ，从而实现数据获取。 A RESTful API is an application program interface ( API ) that uses HTTP requests to GET, PUT, POST and DELETE data. 硬编码和软编码的区别 数据绑定的两种形式： 初始化数据的绑定。直接将数据写在Page方法参数的data对象中。 // .js Page({ /** * 页面的初始数据 */ data: { date: "Jan 28 2017", title: "小时候的冰棍儿与雪糕", postImg: "/images/post/post-4.jpg", avatar: "/images/avatar/avatar-5.png", content: "冰棍儿", readingNum: 92, collectionNum: 109,

日常写设计文档，日常写Demo，写轮播图的时候觉得bootstrap不适合移动端，或者说不是轻量级的，于是换成Swiper，但是写的时候才发现怎么把这东西嵌到Vue里面啊？ Σ( ° △ °|||)︴！？ 果然基于Vue的插件还是很多的，于是就搜到了vue-awesome-swiper，是基于Vue和Swiper开发的轮播图插件，但是看API写出来的怎么总是报警告啊……还是自己研究研究吧…… 本文只适用于Vue脚手架中的使用，CDN引入和使用参考文章最后API链接。 安装 npm npm install vue-awesome-swiper --save 引入 全局引入 在入口文件main.js中进行引入 import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */ ) 局部引入 在需要用到轮播图的vue页面中引入 import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' 并在co

1、前言 需求驱动技术研究：最近项目上要求3d效果居多，轮播效果我们以前一般用swiper就能实现，但是这次界面要求颇高，不得不研究一下three.js 2、学习历程 1、找相关技术博客，未找到符合的 2、琢磨官网，花时间看了看官方文档的介绍，发现three.js的文档不是很通熟易懂 3、开始动手实现一些简单的元素、材质、简单位移动画 4、查找文档和博客一步步实现需求 3、代码 github： https://github.com/Promise-23/threeJs 代码写得比较乱，在此不贴代码了，有兴趣的可以down下来看下，功能基本实现但略显单薄 喜欢的可以帮忙点个start，感谢！ 4、写在最后 1、three.js的功能还是非常强大的，值得深入学习研究 2、数学功底略差，导致一个拉近功能完善不了，拉近角度一直控制不了，后续有思路再实现 3、下面感谢一些博主给的思路和指导！ https://blog.csdn.net/qq_30100043/article/details/80275413 https://blog.csdn.net/qq_30100043/article/details/80114794 https://www.cnblogs.com/v-weiwang/p/6072235.html https://blog.csdn.net/mariosss

微信小程序账号与工具 在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发者账号注册 微信公众平台：https://mp.weixin.qq.com/ 小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1 微信开发者工具 微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信小程序文件结构 主体文件结构 主体部分由三个文件组成，必须放在项目的根目录，如下： | 文件 | 作用 | [app.js] 　　 小程序逻辑 | [app.json]　　 小程序公共设置 | [app.wxss]　　 小程序公共样式表 | 页面文件结构 页面由四个文件组成，分别是： | 文件类型 | 作用 | [js]　　　　页面逻辑 ( 微信小程序没有window和document对象 ) | [wxml] 　　 页面结构 ( XML语法，不是HTML语法 ) | [wxss]　　 页面样式表 ( **拓展了rpx尺寸单位，微信专属响应式像素** ) | [json]　　 页面配置 ( 不能写注释，否则编译报错 ) | 微信小程序配置 app.json 配置项列表 > `app

概述 微信小程序项目实战之豆瓣天气 详细 代码下载： http://www.demodashi.com/demo/10943.html 一、准备工作 1、注册微信小程序 2、在小程序设置中设置request合法域名 3、将项目导入开发工具即可运行 二、程序实现 1、项目代码截图： 2、主要API： //获取电影信息 getMovie: function () { var that = this var url = "https://api.douban.com/v2/movie/in_theaters"; var params = { city : "广州" }; wx.request({ url: url, data: params, header: { "content-type": "json" }, success: function (res) { that.setData({ subjects: res.data.subjects }) }, fail: function (res) { }, complete: function (res) { }, }) }, 3、主页面实现html： <!--index.wxml--> <swiper indicator-dots="true" indicator-active-color="#2AAC5E" indicator

小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。 我的思路是 ：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/> //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟 </swiper-item> </block> </swiper> swiper的各个属性在官方文档中都有，这里就不说明了。最主要的是： style='height:{