微信小程序組件
<template>
<!-- 當即購買按鈕 -->
<view class='comButton'>
<view class="buy"
:style="{width:width,height:height,marginTop:marginTop,marginBottom:marginBottom,background:backgroundcolor,color:color,fontSize:fontSize,borderRadius:borderRadius,border:border}"
:class='{"notBuy":disabled}'
@tap="myClick">
<slot>當即購買</slot>
</view>
</view>
</template>
<script>
export default {
name: "comButton",
components: {},
filters: {},
props: {
//是否禁用
disabled: {
type: Boolean,
default: false
},
//寬度
width: {
type: String,
default: "444rpx"
},
//高度
height: {
type: String,
default: "80rpx"
},
//上外邊距
marginTop: {
type: String,
default: "0rpx"
},
//下外邊距
marginBottom: {
type: String,
default: "0rpx"
},
//按鈕背景顏色
backgroundcolor: {
type: String,
default: "linear-gradient(87deg, #FDC400 0%, #F2781A 100%)"
},
borderRadius: {
type: String,
default: "30px"
},
//文字顏色
color: {
type: String,
default: "#FFFFFF"
},
//文字大小
fontSize: {
type: String,
default: "14px"
},
//是否禁用
disabled: {
type: Boolean,
default: false
},
//按鈕邊框
border: {
type: String,
defalut: "none"
}
},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
myClick() {
this.$emit("myClick");
}
}
};
</script>
<style lang='scss'>
.comButton {
.buy {
// width: 444px;
height: 80px;
background: linear-gradient(90deg, #fdc400 0%, #f2781a 100%);
opacity: 1;
border-radius: 40px;
font-size: 32px;
font-family: PingFang SC;
font-weight: 400;
line-height: 36px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.notBuy {
// width: 444px;
height: 80px;
background: #dddddd;
opacity: 1;
border-radius: 40px;
}
}
</style>
<template>
<!-- 卡片容器 -->
<view class='comCardContainer'
@tap="myClick">
<view class="card-wrap"
:style={width:width,height:height,background:background,padding:padding,borderRadius:borderRadius,boxSizing:boxSizing}>
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: "CardContainer",
components: {},
filters: {},
props: {
width: {
type: String,
default: "375px"
},
height: {
type: String,
default: "750px"
},
background: {
type: String,
default: "white"
},
padding: {
type: String,
default: "0px 0px"
},
borderRadius: {
type: String,
default: "16px"
},
boxSizing: {
type: String,
default: "border-box"
}
},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
myClick() {
this.$emit("myClick");
}
}
};
</script>
<style lang='scss'>
view.comCardContainer {
view.card-wrap {
position: relative;
overflow: hidden;
}
}
</style>
<template>
<view class="AtSearchBar">
<view class="AtSearchBar_hid"
v-if="isDoon"
@tap="goto"></view>
<AtSearchBar :placeholder='placeholder'
:fixed="fixed"
:focus="focus"
:disabled="disabled"
:showActionButton="showActionButton"
:actionName="actionName"
:value="keyValue"
:onActionClick="change"
:onChange='changeKey'
:onConfirm="onConfirm"
:onFocus="onFocus"
:style="{width:width,borderRadius:height,height:height,background:background,border:border}"></AtSearchBar>
</view>
</template>
<script>
import Taro from "@tarojs/taro";
import { AtSearchBar } from "taro-ui-vue";
import "taro-ui-vue/dist/style/components/search-bar.scss";
import "taro-ui-vue/dist/style/components/button.scss";
import "taro-ui-vue/dist/style/components/icon.scss";
//搜索組件
export default {
components: {
AtSearchBar
},
props: {
//佔位符
placeholder: {
type: String,
default: "請輸入搜索內容"
},
//是否固定頂部
fixed: {
type: Boolean,
default: false
},
//是否聚焦
focus: {
type: Boolean,
default: false
},
//是否禁止輸入
disabled: {
type: Boolean,
default: false
},
//是否一直顯示右側按鈕
showActionButton: {
type: Boolean,
default: true
},
//右側按鈕文案
actionName: {
type: String,
default: "搜索"
},
//寬度
width: {
type: String,
default: "95%"
},
//高度
height: {
type: String,
default: "28px"
},
//是否只是展現
//直接跳頁面配合gotoPages方法
isDoon: {
type: Boolean,
default: false
},
background: {
type: String,
default: "#fef9e6"
},
border: {
type: String,
default: "1px solid #fdc400"
},
//搜索內容
keyValue: {
type: String,
default: ""
}
},
data() {
return {
// key: ""
};
},
methods: {
change() {
//搜索控件用@changeValue="changeValue"
//changeValue(key){}
// this.$emit("changeValue", this.key);
this.$emit("changeValue", this.keyValue);
},
changeKey(key) {
// console.log(key);
// this.key = key;
this.$emit("update:keyValue", key);
},
goto() {
this.$emit("gotoPages");
},
onConfirm() {
this.$emit("onConfirm", this.keyValue);
},
onFocus(key) {
this.$emit("onFocus");
}
}
};
</script>
<style lang='scss'>
.AtSearchBar {
display: flex;
justify-content: center;
position: relative;
.at-search-bar__input-cnt {
// background-color: #fef9e6;
.at-search-bar__clear {
display: none !important;
}
.at-search-bar__placeholder-wrap {
-webkit-align-self: left;
-ms-flex-item-align: left;
align-self: left;
-webkit-align-items: left;
-ms-flex-align: left;
align-items: left;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
vertical-align: left;
.at-icon {
color: #777;
}
.at-search-bar__placeholder {
color: #777;
}
}
}
.at-search-bar {
// background-color: #fef9e6;
padding: 0;
// border: 2px solid #fdc400;
.at-search-bar__action {
height: 48px;
width: 56px;
background: linear-gradient(90deg, #fdc400 0%, #f2781a 100%);
opacity: 1;
border-radius: 28px;
font-size: 28px;
line-height: 48px;
color: #fff;
text-align: center;
}
}
.at-search-bar::after {
border: none;
}
.AtSearchBar_hid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
}
</style>
<template>
<!-- 自定義頂部導航條 -->
<view class="CustomTopNav">
<view class="CustomContent"
:style="{ height: navBarHeight + 'px',backgroundColor:backgroundColor}">
<view class="CustomNav"
:style="{
height: menuHeight + 'px',
minHeight: menuHeight + 'px',
left: menuRight + 'px',
bottom: menuBotton + 'px',
}">
<slot></slot>
</view>
</view>
<view :style="{ height: navBarHeight +'px' }"></view>
</view>
</template>
<script>
import Taro from "@tarojs/taro";
export default {
name: "TopNav",
data() {
return {
menuHeight: 0, //膠囊高度
menuTop: 0, //膠囊距離頂部距離
navBarHeight: 0, //導航欄高度
menuRight: 0, //膠囊距右方間距
menuBotton: 0 //膠囊距底部間距
};
},
props: {
//背景顏色
backgroundColor: {
type: String,
default: "white"
}
},
computed: {},
watch: {},
components: {},
created() {
this.getHeight();
},
mounted() {},
methods: {
getHeight() {
const that = this;
// 獲取系統信息
const systemInfo = Taro.getSystemInfoSync();
// 膠囊按鈕位置信息
const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
// 導航欄高度 = 狀態欄到膠囊的間距（膠囊距上距離-狀態欄高度） * 2 + 膠囊高度 + 狀態欄高度
that.navBarHeight =
(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
menuButtonInfo.height +
systemInfo.statusBarHeight;
that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
that.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
that.menuHeight = menuButtonInfo.height;
}
}
};
</script>
<style lang="scss">
.CustomTopNav {
.CustomContent {
position: fixed;
width: 100%;
top: 0;
left: 0;
color: #fff;
z-index: 800;
.CustomNav {
padding-right: 170px;
position: absolute;
height: 100%;
color: black;
display: flex;
align-items: center;
justify-content: space-evenly;
}
}
}
</style>
注：以上內容僅用於平常學習
相關文章
- 1. 微信小程序 組件
- 2. 微信小程序組件
- 3. 【微信小程序】微信小程序picker組件
- 4. 微信小程序----組件之button
- 5. 微信小程序——自定義組件
- 6. 微信小程序組件radio
- 7. 微信小程序的UI組件
- 8. 微信小程序製做組件
- 9. 【微信小程序】組件化開發
- 10. 微信小程序canvas組件
- 更多相關文章...
- • PHP 數組排序 - PHP教程
- • W3C 程序 - W3C 教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • 算法總結-歸併排序
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 微信小程序 組件
- 2. 微信小程序組件
- 3. 【微信小程序】微信小程序picker組件
- 4. 微信小程序----組件之button
- 5. 微信小程序——自定義組件
- 6. 微信小程序組件radio
- 7. 微信小程序的UI組件
- 8. 微信小程序製做組件
- 9. 【微信小程序】組件化開發
- 10. 微信小程序canvas組件