微信小程序实现“鲜肉APP”首页效果
项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star
由于微信小程序目前是当下趋势,正好昨天弄到了破解版微信web开发工具,所以今天正好试试手。由于我是做iOS的,所以对H5和CSS方面不太了解,代码里面写的丑的地方欢迎吐槽。
1.效果演示
WXEXE.gif
2.微信小程序介绍
微信小程序的一个页面主要分成三个部分.js文件.wxml文件和.wxss文件
- . js文件
.js文件相当于ios中的一个控制器,所有的业务逻辑操作都放在该文件中完成,xml页面中显示的数据都从该文件中传入。 - .wxml文件
.wxml文件用于写HTML5代码,也就是用来页面布局。 - .wxss文件
.wxss文件则是用来处理所有的css样式信息
3.代码介绍
页面布局代码,由于开发工具的所有接口访问有限制,所以数据都写在了本地,但是最新的破解版开发工具已经处理的这个问题,我也会尽快将死数据改成网络请求下来的数据
class = "index">
class = "header-container" >
class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
wx:for-items="{{ adimages }}">
class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" >
class = "header-search-img" src="../../images/icon_sshome.png">
class = "scroll-container">
wx:for="{{ result }}" wx:for-index='index' wx:for-item='item'>
class = "home-view-sep-ver" style = "float:left">
class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/>
class = "home-text-nickname" style = "float:left"> {{ item.nickname }}
class = "home-text-city" style = "float:left"> {{ item.city_name }}
wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">
class = "home-invite-container">
class = "home-invite-title" > {{ invite.title }}
class = "home-invite-cover" src = "{{ invite.img_url }}" mode = "aspectFill" />
class = "home-invite-content" style = "display: inline-block;" > {{ invite.content }}
class = "home-invite-subcontent" style = "display: inline-block;"> {{ invite.subcontent }}
class = "scroll-container">
wx:for="{{ recommends }}" wx:for-index='index' wx:for-item='item'>
class = "home-view-sep-ver" style = "float:left">
class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/>
class = "home-text-nickname" style = "float:left"> {{ item.nickname }}
class = "home-text-city" style = "float:left"> {{ item.city_name }}
wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">
微信小程序实现“鲜肉APP”首页效果的更多相关文章
- 微信小程序电商实战-首页(上)
嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图: 架构图. ...
- 微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...
- 微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比 ...
- 微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
- 微信小程序中的app.js-清除缓存
微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...
- 微信小程序与手机APP区别
微信小程序与手机APP区别 ------------------<><><><>------------------ 微信小程序自去年年初,张小龙放话要 ...
- 微信小程序、安卓APP、苹果APP对比分析
今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...
- 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序
微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 ...
- 微信小程序制作日常生活首页
1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...
随机推荐
- java中的vo、dto 、dao
VO是跟数据库里表的映射,一个表对应一个VO DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成 BO是业务层,做逻辑处理的 VO , PO , BO , QO, DAO ,POJO ...
- 你不知道的 flex 技巧
一.使用 Auto Margins 对齐 不需要给图片使用任何的 flex,也不需要给父容器设置 space-between,只需要给 ' BUY-BUY-BUY' 按钮设置 margin-left: ...
- [leetcode-554-Brick Wall]
There is a brick wall in front of you. The wall is rectangular and has several rows of bricks.The br ...
- 【LeetCode】217. Contains Duplicate
题目: Given an array of integers, find if the array contains any duplicates. Your function should retu ...
- 【Android Developers Training】 40. 序言:通过NFC共享文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 28. 将用户带领到另一个应用
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Delegate(委托)
在前面lambda章节中稍微提了一下委托,今天这章就让我们来深究一下委托. 委托的本质是一种类,他是继承MulticastDelegate类的. 而声明委托的关键字的delegate,如:public ...
- javascript精度问题与调整
一个经典的问题: 0.1+0.2==0.3 答案是:false 因为:0.1+0.2=0.30000000000000004 第一次看到这个结果就是无比惊讶,下巴碰到地上,得深入了解下问题出在哪里,该 ...
- 原生ajax封装,数据初始化,
var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ...
- webpack认识
1 webpack是什么? CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用 ...