微信小程序——組件（二）
在上篇文章組件（一）裏已經講解了如何建立一個項目，如今繼續。。。講解一個頁面佈局以及各個組件的使用。在學習過程當中，發現小程序支持flex佈局，這對於學習過react native的人來講太好了，佈局方面不用擔憂了。下面來看tab的建立javascript
在使用微信小程序編譯代碼的工具時，快捷鍵的使用必不可少，全部快捷鍵在這裏有講解：小程序編譯器快捷鍵html
1.根據我上篇文章介紹，有講如何建立一個小程序項目，效果如圖所示：java
2.以前講解過app.json裏是定義全局的一些東西，包括總體顏色風格，路由等等，詳細配置講解見官網。下面是app.json裏的代碼，調整了背景顏色以及建立了兩個tab模塊。react
{
"pages": [
"pages/component/index/index",
"pages/component/logs/logs"
],
"window": {
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarTitleText": "wxTestOne",
"navigationBarTextStyle": "black",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/component/index/index",
"iconPath": "images/icon_component.png",
"selectedIconPath": "images/icon_component_HL.png",
"text": "組件"
},
{
"pagePath": "pages/component/logs/logs",
"iconPath": "images/icon_API.png",
"selectedIconPath": "images/icon_API_HL.png",
"text": "組件"
}
]
}
}
注意看紅色圈出的部分是新添加的模塊，這裏只要在app.json添加正確頁面路由的代碼，左側邊欄項目文件裏就會多出相對應的頁面文件（.js .json .wxml .wxss），固然也能夠鼠標右鍵來添加想要的文件。效果如圖：json
3.「組件」這個tab模塊對應的是「index」，「接口」tab對應的模塊是logs（上圖右邊tab名字應該是「接口」）。接下來在 組件 頁面顯示列表，代碼以下：canvas
index.wxml代碼：小程序
<!--pages/component/index/index.wxml-->
<view class="index">
<view class="index-hd">
<image class="index-logo" src="../../resources/kind/logo.png"></image>
<view class="index-desc">如下將展現小程序官方組件能力，組件樣式僅供參考，開發者可根據自身需求自定義組件樣式，具體屬性參數詳見小程序開發文檔。</view>
</view>
<view class="index-bd">
<view class="kind-list">
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view>
<image class="kind-list-img" src="../../resources/kind/{{item.id}}.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
<navigator url="pages/{{page}}/{{page}}" class="navigator">
<view class="navigator-text">{{page}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
index.js代碼：微信小程序
Page({
/**
* 頁面的初始數據
*/
data: {
list: [
{
id: 'view',
name: '視圖容器',
open: false,
pages: ['view', 'scroll-view', 'swiper']
}, {
id: 'content',
name: '基礎內容',
open: false,
pages: ['text', 'icon', 'progress']
}, {
id: 'form',
name: '表單組件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
}, {
id: 'nav',
name: '導航',
open: false,
pages: ['navigator']
}, {
id: 'media',
name: '媒體組件',
open: false,
pages: ['image', 'audio', 'video']
}, {
id: 'map',
name: '地圖',
pages: ['map']
}, {
id: 'canvas',
name: '畫布',
pages: ['canvas']
}
]
},
kindToggle: function (e) {
var id = e.currentTarget.id, list = this.data.list;
for (var i = 0, len = list.length; i < len; ++i) {
if (list[i].id == id) {
list[i].open = !list[i].open
} else {
list[i].open = false
}
}
this.setData({
list: list
});
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動做
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss代碼：微信
.index-hd {
padding: 80rpx;
text-align: center;
}
.index-bd {
padding: 0 30rpx 40rpx;
}
.index-ft {
padding-bottom: 20rpx;
text-align: center;
}
.index-logo {
width: 86rpx;
height: 86rpx;
}
.index-desc {
margin-top: 20rpx;
color: #888;
font-size: 28rpx;
}
.navigator-box {
opacity: 0;
position: relative;
background-color: #fff;
line-height: 1.41176471;
font-size: 34rpx;
transform: translateY(-50%);
transition: 0.3s;
}
.navigator-box-show {
opacity: 1;
transform: translateY(0);
}
.navigator {
padding: 20rpx 30rpx;
position: relative;
display: flex;
align-items: center;
}
.navigator:before {
content: " ";
position: absolute;
left: 30rpx;
top: 0;
right: 30rpx;
height: 1px;
border-top: 1rpx solid #d8d8d8;
color: #d8d8d8;
}
.navigator:first-child:before {
display: none;
}
.navigator-text {
flex: 1;
}
.navigator-arrow {
padding-right: 26rpx;
position: relative;
}
.navigator-arrow:after {
content: " ";
display: inline-block;
height: 18rpx;
width: 18rpx;
border-width: 2rpx 2rpx 0 0;
border-color: #888;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
margin-top: -8rpx;
right: 28rpx;
}
.kind-list-item {
margin: 20rpx 0;
background-color: #fff;
border-radius: 4rpx;
overflow: hidden;
}
.kind-list-item:first-child {
margin-top: 0;
}
.kind-list-text {
flex: 1;
}
.kind-list-img {
width: 60rpx;
height: 60rpx;
}
.kind-list-item-hd {
padding: 30rpx;
display: flex;
align-items: center;
transition: opacity 0.3s;
}
.kind-list-item-hd-show {
opacity: 0.2;
}
.kind-list-item-bd {
height: 0;
overflow: hidden;
}
.kind-list-item-bd-show {
height: auto;
}
app.wxss代碼：app
/**app.wxss**/
/* reset */
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
checkbox, radio{
margin-right: 10rpx;
}
button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
form{
width: 100%;
}
/* lib */
.strong{
font-weight: bold;
}
.tc{
text-align: center;
}
/* page */
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page-head{
padding: 60rpx 50rpx 80rpx;
text-align: center;
}
.page-head-title{
display: inline-block;
padding: 0 40rpx 20rpx 40rpx;
font-size: 32rpx;
color: #BEBEBE;
}
.page-head-line{
margin: 0 auto;
width: 150rpx;
height: 2rpx;
background-color: #D8D8D8;
}
.page-head-desc{
padding-top: 20rpx;
color: #9B9B9B;
font-size: 32rpx;
}
.page-body {
width: 100%;
flex-grow: 1;
overflow-x: hidden;
}
.page-body-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.page-body-wording {
text-align: center;
padding: 200rpx 100rpx;
}
.page-body-info {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
width: 100%;
padding: 50rpx 0 150rpx 0;
}
.page-body-title {
margin-bottom: 100rpx;
font-size: 32rpx;
}
.page-body-text {
font-size: 30rpx;
line-height: 26px;
color: #ccc;
}
.page-body-text-small {
font-size: 24rpx;
color: #000;
margin-bottom: 100rpx;
}
.page-foot{
margin: 100rpx 0 30rpx 0;
text-align: center;
color: #1aad19;
font-size: 0;
}
.icon-foot{
width: 152rpx;
height: 23rpx;
}
.page-section{
width: 100%;
margin-bottom: 60rpx;
}
.page-section_center{
display: flex;
flex-direction: column;
align-items: center;
}
.page-section:last-child{
margin-bottom: 0;
}
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-section-spacing{
box-sizing: border-box;
padding: 0 80rpx;
}
.page-section-title{
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.page-section-gap .page-section-title{
padding-left: 0;
padding-right: 0;
}
.page-section-ctn{
}
/* widget */
.btn-area{
margin-top: 60rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
.image-plus {
width: 150rpx;
height: 150rpx;
border: 2rpx solid #D9D9D9;
position: relative;
}
.image-plus-nb{
border: 0;
}
.image-plus-text{
color: #888888;
font-size: 28rpx;
}
.image-plus-horizontal {
position: absolute;
top: 50%;
left: 50%;
background-color: #d9d9d9;
width: 4rpx;
height: 80rpx;
transform: translate(-50%, -50%);
}
.image-plus-vertical {
position: absolute;
top: 50%;
left: 50%;
background-color: #d9d9d9;
width: 80rpx;
height: 4rpx;
transform: translate(-50%, -50%);
}
.demo-text-1{
position: relative;
align-items: center;
justify-content: center;
background-color: #1AAD19;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-1:before{
content: 'A';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-2{
position: relative;
align-items: center;
justify-content: center;
background-color: #2782D7;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-2:before{
content: 'B';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-3{
position: relative;
align-items: center;
justify-content: center;
background-color: #F1F1F1;
color: #353535;
font-size: 36rpx;
}
.demo-text-3:before{
content: 'C';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果如圖：
相關文章
- 1. 微信小程序 組件
- 2. 微信小程序組件
- 3. 【微信小程序】微信小程序picker組件
- 4. 微信小程序把玩（二十二）action-sheet組件
- 5. 微信小程序----組件之button
- 6. 微信小程序——自定義組件
- 7. 微信小程序組件radio
- 8. 微信小程序的UI組件
- 9. 微信小程序製做組件
- 10. 【微信小程序】組件化開發
- 更多相關文章...
- • PHP 數組排序 - PHP教程
- • W3C 程序 - W3C 教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • 算法總結-歸併排序
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 微信小程序 組件
- 2. 微信小程序組件
- 3. 【微信小程序】微信小程序picker組件
- 4. 微信小程序把玩（二十二）action-sheet組件
- 5. 微信小程序----組件之button
- 6. 微信小程序——自定義組件
- 7. 微信小程序組件radio
- 8. 微信小程序的UI組件
- 9. 微信小程序製做組件
- 10. 【微信小程序】組件化開發