1. 視圖容器
1.1 view
(1)eg1
<view class="artList">
<block v-for="(item,index) in artList" :key="index">
<view class="item" v-if="item.type == 'image'">
<image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg"/>
</view>
<view class="item" v-if="item.type=='text'">
<textarea :value="item.content" placeholder="" v-model="artList[index].content"></textarea>
<view :data-index="index" class="deleteText" @tap="deleteText">刪除</view>
</view>
</block>
</view>
(2)eg2
<!-- 提交按鈕 -->
<view class="submitNow" v-if="artList.length > 0" @tap="submitNow">編輯文章</view>
(3)eg3
<view style="height:50upx;"></view>
(4)eg4
<!-- 文章內(nèi)容區(qū) -->
<view class="grace-news-list">
<block v-for="(item,index) in artList" :key="index">
<!-- 一張圖 -->
<navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-img-big">
<image :src="item.art_content[0]" mode="widthFix"></image>
</view>
</view>
</navigator>
<!-- 三張圖 -->
<navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-imgs">
<view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
</view>
</view>
</navigator>
</block>
</view>
(5)eg5
<view class='item' v-for="(item,index) in orderList" :key="key" v-for-item="item" v-for-index="index" @tap='bindViewDetail' data-machine-sn="item.sn">
<icon class='iconfont uc-liebiao'></icon>
<view class='item-name'>
<view class='machine-name'>{{item.name}}</view>
<view class='machine-sn'>{{item.sn}}</view>
</view>
<view class='item-num'>{{item.number}}</view>
</view>
改為:
<view class='item' v-for="(item,index) in orderList" :key="key" @tap='bindViewDetail' :data-machine-sn="item.sn">
<icon class='iconfont uc-liebiao'></icon>
<view class='item-name'>
<view class='machine-name'>{{item.name}}</view>
<view class='machine-sn'>{{item.sn}}</view>
</view>
<view class='item-num'>{{item.number}}</view>
</view>
(6)eg6
<view class="btn-view">
<view class="btn-view-con" wx:for="{{btn_arr}}" wx:key="{{index}}" wx:if="{{userInfo.is_root=='1'?true:index=='1'?false:true}}">
<view class="circle_view_con">
<view class="circle_view" style="width:{{windowWidth*0.5/3}}px;height:{{windowWidth*0.5/3}}px;border-radius:50%;margin:{{windowWidth*0.25/3-2}}px;margin-bottom:{{windowWidth*0.1/3}}px;" bindtap="{{item.bindthing}}" >
<image src="{{item.img_src}}"></image>
</view>
</view>
<text>{{item.text}}</text>
</view>
</view>
this.setData({
btn_arr: [{
bindthing: "switchTo",
img_src: "/images/my/fengrenji.png",
text: this.data.T_D.machine
}, {
bindthing: "navigatorToStaffPage",
img_src: "/images/my/users.png",
text: this.data.T_D.staff
}, {
bindthing: "",
img_src: "/images/my/jk_service.png",
text: this.data.T_D.service
}]
});
switchTo:function(){
wx.switchTab({
url: '../machine/index'
})
},
navigatorToStaffPage: function () {
wx.navigateTo({
url: "../employee/index"
})
},
改為:
<template>
<view>
<view class="btn-view">
<view class="btn-view-con" v-for="(item,index) in btn_arr" :key="index" v-if="userInfo.is_root == 1 ? true : index == '1' ? false : true">
<view class="circle_view_con">
<view class="circle_view" :style="{'width':(windowWidth*0.5/3)+'px','height': (windowWidth*0.5/3)+'px','margin':(windowWidth*0.25/3-2)+'px','margin-bpttom': (windowWidth*0.1/3)+'px'}" @tap="routingJump(index)">
<image :src="item.img_src"></image>
</view>
</view>
<text>{{item.text}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
btn_arr : [{
//bindthing : "switchTo",
img_src : "/static/my/fengrenji.png",
text : "text_machine"
},
{
//bindthing : "navigatorToStaffPage",
img_src : "/static/my/users.png",
text : "text_staff"
},
{
//bindthing : "",
img_src : "/static/my/jk_service.png",
text : "text_service"
}]
};
},
methods: {
routingJump:function(index){
if (index == "0") {
console.log("界面跳轉(zhuǎn)至機(jī)器主頁(yè)");
uni.switchTab({
url:'/pages/machine/machine'//機(jī)器主頁(yè)
})
} else if (index == "1") {
console.log("界面跳轉(zhuǎn)至員工界面");
uni.navigateTo({
url:'/pages/employee/employee'//員工界面
})
}
},
}
}
</script>
1.2 scroll-view
(1)eg1
<!-- 通過(guò)點(diǎn)擊方式(選項(xiàng)卡的方式代碼負(fù)責(zé)且應(yīng)用卡)切換分類(lèi)(高效簡(jiǎn)單) 掌握css動(dòng)態(tài)樣式追加小技巧 -->
<view class="grace-header-cate">
<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
<view v-for="(cate,index) in categories" :key="index" :data-cateid="cate.cateId" :data-index="index"
:class="[cateCurrentIndex == index ? 'grace-tab-current' : '']" @tap="tabChange">{{cate.name}}
</view>
</scroll-view>
</view>
2. 基礎(chǔ)內(nèi)容
2.1 icon
請(qǐng)參考uni-app組件使用注意中的icon的使用說(shuō)明部分罗珍。
2.2 text
3. 表單組件
3.1 button
<button type="primary" form-type="submit">添加</button>
3.3 form
(1)eg1
<!-- 輸入?yún)^(qū) -->
<form @submit="submit">
<view class="inputArea">
<view class="addImg" @tap="addImg">+圖片</view>
<view class="addText">
<textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="請(qǐng)輸入文本"></textarea>
<button type="primary" form-type="submit">添加</button>
</view>
</view>
</form>
3.4 input
- value :輸入框的初始內(nèi)容
- placeholder :輸入框?yàn)榭諘r(shí)占位符(引用國(guó)際化文本問(wèn)題)
- name : 該屬性的作用,uni-app官網(wǎng)無(wú)該屬性
- v-model :動(dòng)態(tài)綁定數(shù)據(jù)
- @input:當(dāng)鍵盤(pán)輸入時(shí)泼差，觸發(fā)input事件不撑，event.detail = {value}
- @blur:輸入框失去焦點(diǎn)時(shí)觸發(fā)押桃，event.detail = {value: value}
(1)eg1
<input type="text" v-model="title" placeholder="請(qǐng)輸入標(biāo)題"/>
(2)eg2
<input type="text" class="weui-search-bar__input" :placeholder="T_D.keyword" placeholder-style="color:#e2e2e2" v-model="keyword"/>
(3)eg3
<input type="text" class="weui-search-bar__input" :placeholder="T_D.keyword" v-model="keyword" @blur="inputBlur" @input="inputTyping" />
<view class="weui-icon-clear" v-if="keyword.length > 0" @tap="clearInput">
<icon type="clear" size="14"></icon>
</view>
(4)eg4
小程序:
<view class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="{{T_D.pleaseEnterGroupName}}" name="name" value="{{name}}">{{name}}</input>
</view>
修改語(yǔ)法:
<view class="weui-cell__bd">
<input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" :value="name">{{name}}</input>
</view>
備注:input 為單標(biāo)簽,值只能寫(xiě)在里面.繼續(xù)修改:
<view class="weui-cell__bd">
<input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" :value="name"></input>
</view>
雙向綁定:v-model和:value的效果一致.
<view class="weui-cell__bd">
<input class="weui-input" type="text" :placeholder="T_D.pleaseEnterGroupName" name="name" v-model="name"></input>
</view>
3.6 picker
- mode :
- :range :mode為 selector 或 multiSelector 時(shí)捷绒，range 有效
- :value :value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 0 開(kāi)始）
- @change :value 改變時(shí)觸發(fā) change 事件先壕，event.detail = {value: value}
- :range-key :當(dāng) range 是一個(gè) Array 時(shí)涯冠，通過(guò) range-key 來(lái)指定 Object 中 key 的值作為選擇器顯示內(nèi)容
(1)eg1
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
(2)eg2
<!-- 選擇分類(lèi) -->
<view class="art-cate">
<view>文章分類(lèi)</view>
<view class="">
<picker mode="selector" :range="caties" @change="cateChange">
<view>{{caties[currentCateIndex]}}</view>
</picker>
</view>
</view>
3.6 picker-view
(1)eg1
<modal title="{{T_D.pleaseChoosePosition}}" hidden="{{modalHidden}}" confirm-text="{{T_D.confirm}}" cancel-text="{{T_D.cancel}}" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
<picker-view indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" range="{{positionArray}}" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{positionArray}}" wx:key="{{item.id}}" style="line-height: 50px">{{item.text}}</view>
</picker-view-column>
</picker-view>
</modal>
改為:
<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
<picker-view indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
<picker-view-column>
<view v-for="(item,index) in positionArray" :key="item.id" style="line-height: 50px">{{item.text}}</view>
</picker-view-column>
</picker-view>
</modal>
備注:語(yǔ)法修改完成后,運(yùn)行時(shí)列表內(nèi)容不顯示,只有一個(gè)空的列表架子.
modify1:
<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
<picker-view indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in positionArray" :key="item.id">{{item.text}}</view>
</picker-view-column>
</picker-view>
</modal>
.item{
line-height: 50px;
height:50px !important;
}
備注:style提取出來(lái)后,列表內(nèi)容成功顯示,但change事件異常,列表無(wú)法正臣鹋玻滑動(dòng).
modify2:
<modal :title="T_D.pleaseChoosePosition" :hidden="modalHidden" :confirm-text="T_D.confirm" :cancel-text="T_D.cancel" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
<picker-view v-if="!modalHidden" indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :value="value" @change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in positionArray" :key="item.id" style="line-height: 50px">{{item.text}}</view>
</picker-view-column>
</picker-view>
</modal>
注意:添加 v-if="!modalHidden" 所有問(wèn)題都解決.
3.11 textarea
<textarea :value="item.content" placeholder="" v-model="artList[index].content"></textarea>
<textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="請(qǐng)輸入文本"></textarea>
4. 導(dǎo)航-navigator
(1)eg1
<!-- 文章內(nèi)容區(qū) -->
<view class="grace-news-list">
<block v-for="(item,index) in artList" :key="index">
<!-- 一張圖 -->
<navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-img-big">
<image :src="item.art_content[0]" mode="widthFix"></image>
</view>
</view>
</navigator>
<!-- 三張圖 -->
<navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-imgs">
<view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
</view>
</view>
</navigator>
</block>
</view>
5. 媒體組件
5.3 image
- src:圖片資源地址
- mode:圖片裁剪、縮放的模式
- lazy-load:圖片懶加載
(1)eg1
<image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg"/>
(2)eg2
<!-- 文章內(nèi)容區(qū) -->
<view class="grace-news-list">
<block v-for="(item,index) in artList" :key="index">
<!-- 一張圖 -->
<navigator v-if="item.art_content.length < 3" open-type="navigate" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-img-big">
<image :src="item.art_content[0]" mode="widthFix"></image>
</view>
</view>
</navigator>
<!-- 三張圖 -->
<navigator v-if="item.art_content.length >= 3" :url="'../info/info?artid=' + item.art_id">
<view class="grace-news-list-img-news">
<view class="grace-news-list-title-main">{{item.art_title}}</view>
<view class="grace-news-list-imgs">
<view class="imgs"><image :src="item.art_content[0]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[1]" mode="widthFix"></image></view>
<view class="imgs"><image :src="item.art_content[2]" mode="widthFix"></image></view>
</view>
</view>
</navigator>
</block>
</view>
6. 進(jìn)度條-progress
<view class="weui-progress">
<view class="weui-progress__bar">
<progress percent="{{item.use_time}}" stroke-width="3" />
</view>
</view>
修改語(yǔ)法:
<view class="weui-progress">
<view class="weui-progress__bar">
<progress :percent="item.use_time" stroke-width="3" />
</view>
</view>
其他
注意事項(xiàng).PNG
可參考小程序轉(zhuǎn)uni-app語(yǔ)法差異
