小程序是什么?

微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用。

一.小程序的样式编写:

目录结构:

app.json

 {
"pages": [
"pages/index/index",
"pages/message/message",
"pages/userCenter/userCenter",
"pages/contact/contact"
],
"window": {
"navigationBarBackgroundColor": "#13d1be",
"navigationBarTextStyle": "black",
"navigationBarTitleText":"本地宝",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"selectedColor":"rgb(238, 82, 61)",
"list": [{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "tabs/home.png",
"selectedIconPath": "tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "tabs/message.png",
"selectedIconPath": "tabs/message-active.png"
},
{
"pagePath": "pages/userCenter/userCenter",
"text": "我的",
"iconPath": "tabs/profile.png",
"selectedIconPath": "tabs/profile-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "tabs/contact.png",
"selectedIconPath": "tabs/contact-active.png"
}
]
}
}

公共样式:

 /*公共的样式  */
/*伪元素边框-不占位置 */
.bd-r,.bd-t{
position: relative;
} .bd-r::after,.bd-t::before{
content: "";
position: absolute;
left:0;
top:0;
width: 100%;
height: 1rpx;
background-color: rgb(239, 239, 239);
} .bd-r::before{
right: 0;
left: auto;
width:1rpx;
height: 100%;
} .h100-block{
height: 10rpx;
background-color: #f0f0f0;
} /*利用flex伸缩盒属性,实现栅格化布局 */
.row{
display: flex;
} .row .col{
flex: 1;
}

主页页面编写:

index.wxml

 <!--pages/index/index.wxml-->
<block>
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color='#f99' indicator-active-color='#f11' circular='true'>
<swiper-item>
<image src="../../images/banner-01.png" width="375" height="150" />
</swiper-item>
<swiper-item>
<image src="../../images/banner-02.png" width="375" height="150" />
</swiper-item> <swiper-item>
<image src="../../images/banner-01.png" width="375" height="150" />
</swiper-item>
<swiper-item>
<image src="../../images/banner-02.png" width="375" height="150" />
</swiper-item>
</swiper>
</block> <block>
<view class='index-nav'>
<navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-01.png'></image>
<text>美食</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-02.png'></image>
<text class='xizu'>洗浴足疗</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-03.png'></image>
<text class='jiehuntxt'>结婚啦</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-04.png'></image>
<text class='ktvtxt'>KTV</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-05.png'></image>
<text class='findworktext'>找工作</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-06.png'></image>
<text class='fudao'>辅导班</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-07.png'></image>
<text class='qichetext'>汽车保养</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-08.png'></image>
<text>租房</text>
</view>
</navigator> <navigator>
<view class='img bd-r bd-t'>
<image src='../../icons/grid-09.png'></image>
<text>装修</text>
</view>
</navigator>
</view>
</block>
<view class='h100-block'></view> <view class='index-enter row'> <view class='col'>
<navigator>
<image src='../../images/link-01.png'></image>
</navigator>
</view> <view class='col'>
<navigator>
<image src='../../images/link-02.png'></image>
</navigator>
</view>
</view>

主页样式:index.wxss

 /* pages/index/index.wxss */
swiper-item image{
width: 750rpx;
height: 340rpx;
}
.index-nav{
overflow: hidden;
}
.img{
text-align: center;
font-size: 14px;
float: left;
width:33.3%;
height: 198rpx; /* box-sizing: border-box;
border-left: 1rpx solid rgb(239, 239, 239);
border-bottom: 1rpx solid rgb(239, 239, 239); */
}
/*选择第三个元素的倍数,把修饰用的边框隐藏 */
/*nth-of-type:选中类型的的第几个
::before需要配合content:''使用 */
.img:nth-of-type(3n)::before{
background-color: transparent;
} .img image{
width: 90rpx;
height: 90rpx;
display: block;
margin: 40rpx auto 20rpx;
} .img text{
display: block;
} .xizu{
left: 21%!important;
}
.jiehuntxt{
left: 29%!important;
} .findworktext{
left: 29%!important;
}
.fudao{
left: 29%!important;
}
.qichetext{
left: 21%!important;
} .index-enter image{
width: 320rpx;
height: 175rpx;
} .index-enter{
text-align: center;
padding: 10rpx ;
}

微信小程序--轮播图,标题,盒子,tab栏的合成例子的更多相关文章

  1. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  2. 微信小程序------轮播图

    swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...

  3. 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码: 这是WXML 页面 代码: <view class='carousel_div'> <swiper class=" ...

  4. 微信小程序轮播图的制作与跳转

    <!--轮播图 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' au ...

  5. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  6. 微信小程序轮播图

    swiper标签 <!--index.wxml--> <swiper class="swiper" indicator-dots="true" ...

  7. 一分钟学会如何自定义小程序轮播图(蜜雪冰城Demo)

    最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了.本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解 ...

  8. 02微信小程序-轮播的宽度100%显示和轮播的基础配置

    1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image ...

  9. 微信小程序轮播组件

    在index.wxml中添加以下代码 <view> <swiper indicator-dots="{{indicatorDots}}" autoplay=&qu ...

随机推荐

  1. SpringCloud学习笔记(二):微服务概述、微服务和微服务架构、微服务优缺点、微服务技术栈有哪些、SpringCloud是什么

    从技术维度理解: 微服务化的核心就是将传统的一站式应用,根据业务拆分成一个一个的服务,彻底 地去耦合,每一个微服务提供单个业务功能的服务,一个服务做一件事, 从技术角度看就是一种小而独立的处理过程,类 ...

  2. JDK源码阅读--LinkedList

    public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, D ...

  3. json-lib解决死循环

    1.添加lazy=“false”(两个xml文件中都要添加) 2.设置过滤器

  4. sqlmap:wins系统+python3上安装

    python2和python3互不兼容,SqlMap是基于python2的,所以SqlMap不支持python3,这里使用virtualenvwrapper切换python版本: 一.sqlmap的安 ...

  5. Neo4j与springdata集成

    1.maven工程需导入的jar包 <!-- neo4j --> <dependency> <groupId>org.springframework.data< ...

  6. Python2.7安装matplotlib、numpy

    Windows版本 一.从官网下载python2.7,安装过程中把pip给装上,并且把path也选上,就是把自带的工具全选: 二.在cmd下输入python,会进入交互式界面,出了问题很大程度上是因为 ...

  7. 根据url的属性名来取属性值赋值给js

    1.方法一:js的正则表达式:请求路径:http://127.0.0.1/pec/jsp/member/refundOrder.jsp?status=4 <script> var stat ...

  8. 【论文翻译】NIN层论文中英对照翻译--(Network In Network)

    [论文翻译]NIN层论文中英对照翻译--(Network In Network) [开始时间]2018.09.27 [完成时间]2018.10.03 [论文翻译]NIN层论文中英对照翻译--(Netw ...

  9. Luogu P1429 平面最近点对(加强版)(分治)

    P1429 平面最近点对(加强版) 题意 题目描述 给定平面上\(n\)个点,找出其中的一对点的距离,使得在这\(n\)个点的所有点对中,该距离为所有点对中最小的. 输入输出格式 输入格式: 第一行: ...

  10. [编织消息框架][JAVA核心技术]数值与逻辑分离

    为什么要分离? 业务需求是不停地变,如果把条件写进代码里,当用户需求变时要改代码发版本更新才能生效,这过程无疑是漫长的 就算是在开发期,不停的变开发者精力耗光在沟通,小修改上,无法专注逻辑部分 分离的 ...