微信小程序（模仿上海随申办）

把首页完成了，还有底部TabBar，主要用到的东西有swiper，横向滚动，天气API的获取......也利用了封装的思想，把常用的代码块封装成组件component。如果你学过vue框架，那你学小程序就很轻松了，语法都差不多。

项目目录

需要掌握小程序基本的组件，页面的布局，还要学会API的请求，更重要的是要有封装的思想，使代码不臃肿，看起来简单明了。这次我就完成了部分页面。

TabBar

跑马灯以及API的获取

flex布局

轮播图

横向滚动

我所运用的都是基本知识点了，没有用到很难的东西。

部分代码展示（轮播图封装成了组件，封装思路跟vue差不多）

轮播图首页wxml

轮播图js

轮播图wxss

.container {

position: relative;

top: 120px;

background: #ffffff;

}

.swiper-box{

border-radius: 20px;

border: none;

}

.targetImg{

width: 100%;

height: 100%;

}

/*小圆点 */

.dots{

width: 100%;

height: 4rpx;

display: flex;

position: absolute;

bottom: 30rpx;

}

.dotsBox {

height: 4rpx;

display: flex;

margin: 0 auto;

}

/*未选中时的小圆点样式 */

.dot{

width: 26rpx;

height: 4rpx;

border-radius: 2rpx;

margin-right: 10rpx;

background-color: #ffffff;

opacity: 0.4;

}

/*选中以后的小圆点样式 */

.dot-active{

opacity: 1;

}

微信小程序（模仿上海随申办）相关推荐

微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序模仿开眼视频app（二）——搜索功能
微信小程序模仿开眼视频app(一)有介绍首页.视频详情和分类部分可到我的github账号上去copy文件搜索部分一开始没想要设置历史记录啊.热门搜索啊这些的,只是想把搜索框弄好看一点,无意中发现 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类
<微信小程序模仿开眼视频app(一)--视频首页.视频详情.分类> <微信小程序模仿开眼视频app(二)--搜索功能> 可到我的github账号上去copy文件瀑布流部分文 ...
微信小程序-模仿绘制聊天界面
参考文章 1.小程序模仿微信聊天界面 2.微信小程序实现仿微信聊天界面(各种细节处理) 3.微信小程序之页面中关于聊天框三角形的制作和使用 4.仿微信聊天记录时间显示 5.微信小程序-同时获取麦克风. ...
微信小程序模仿快播标签云滚动特效
说到快播,故事肯定就不少.用过的人都知道快播首页有个标签云的特效效果,就是渐隐渐显外加上下滚动,其实还挺好看的.至于其他故事嘛,因为没有酒,所以,还是来说说代码吧~ 一开始不是做这个特效需求,但因为在 ...
微信小程序模仿拼多多APP地址选择样式
最终效果在首先在page文件夹下创建components文件夹,在components文件夹下创建region-picker的文件夹,然后在region-picker文件夹下创建Component名 ...
微信小程序模仿微信主页及页面跳转详解
主页wxml代码: < ...
微信小程序模仿拼多多搜索页
效果看拼多多的搜索页,先上张静态图 wxml  <view class='search-box'><icon class='iconfont ic ...

微信小程序（模仿上海随申办）

微信小程序（模仿上海随申办）相关推荐

最新文章

热门文章