Skip to content

M
mayi-mp-shop
Commit 22188b88 by 李嘉林
Options

原生轮播图组件

parent e3599455
Showing with 817 additions and 6 deletions
src/pages/home/index.vue
<template> <template>
<div class="domain">abc</div> <div class="domain">
abc
<banner id="banner" :datas="componentsList[0]"></banner>
</div>
</template> </template>
<script> <script>
export default { export default {
data() {
} return {
list: [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201301%2F29%2F125313339n39z82ydzc32y.jpg&refer=http%3A%2F%2Fattachments.gfan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613544661&t=4677366fc9bbf182a75ad8a919351527",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F31%2F111859myvyiivetyftfz2n.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613544679&t=ea97cda73013df25cc49d75fd014e95f",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201304%2F18%2F001339jv88x0qs06vo3qq6.jpg&refer=http%3A%2F%2Fattachments.gfan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613544689&t=98ead699523e2e28725b15d6d16899db",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201111%2F21%2F205700txzuacubbcy91u99.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613544701&t=465edd17dcb630192470c96a1b7e2ab7",
],
componentsList: [
{
id: 6,
componentName: "轮播图",
componentCode: "banner",
componentType: 1,
queueNumber: 0,
componentInfo: { visible: 1, condition: "", drawable: 0 },
componentData: {
initSize: 5,
indStyle: "circle",
initIndSite: "onter",
indColor: "rgba(144, 202, 249, 1)",
indBorderShow: true,
borderRadius: 6,
imgList: [
{
visible: 1,
condition: "",
imageUrl:
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/jpg/dd38df19-b400-45b5-9c6c-d7b4f865df86.jpg",
link: {
name: "选择链接",
link: "",
type: 0,
feature: { type: "", value: "" },
},
remark: "轮播1111",
avatorMask: false,
},
{
visible: 1,
condition: "",
imageUrl:
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/jpg/ef24591c-277d-4d39-a122-0d6f516f21ec.jpg",
link: {
name: "选择链接",
link: "",
type: 0,
feature: { type: "", value: "" },
},
remark: "轮播3",
avatorMask: false,
},
],
paddingList: [
{ name: "上", value: "10" },
{ name: "下", value: "10" },
{ name: "左", value: "10" },
{ name: "右", value: "10" },
],
},
},
{
id: 1,
componentName: "文本",
componentCode: "text-text",
componentType: 1,
queueNumber: 1,
componentInfo: { visible: 1, drawable: 0 },
componentData: {
content: "使用此文本与您的客户分享您的品牌",
link: {
name: "选择链接",
link: "",
type: 0,
feature: { type: "", value: "" },
},
fontColor: "#333333",
backgroundColor: "",
initcharAlign: "center",
initcharSize: 1,
paddingList: [
{ name: "上", value: 20 },
{ name: "下", value: 20 },
{ name: "左", value: 50 },
{ name: "右", value: 50 },
],
},
},
{
id: 5,
queueNumber: 2,
componentName: "限时活动",
componentCode: "time-limited-discount",
componentType: 1,
componentInfo: { visible: 1, condition: "", drawable: 0 },
componentData: {
dimension: 0,
actList: [],
actTitle: "",
goodsList: [],
endTime: "",
selectActivityValue: "",
activityCode: "",
countDownShow: true,
moreShow: false,
moreButtonSite: "top",
style: "list",
rowNum: 2,
columnNum: 2,
backgroundColor: "#fff",
paddingList: [
{ name: "上", value: 10 },
{ name: "下", value: 10 },
{ name: "左", value: 10 },
{ name: "右", value: 10 },
],
},
},
{
id: 2,
componentName: "文章卡片",
componentCode: "information",
componentType: 1,
queueNumber: 3,
componentInfo: { visible: 1, condition: "", drawable: 0 },
componentData: {
title: "",
moreShow: true,
tagShow: false,
viewNumShow: false,
starNumShow: false,
showArticleDialog: false,
listStyle: 1,
status: 2,
addArticleType: 1,
autoAddNum: 10,
fontWeight: "400",
textColor: "rgba(51,51,51,1)",
bgColor: "rgba(255,255,255,1)",
cartStyle: 1,
cartRadius: 1,
classifId: null,
classifName: null,
articityId: ["140"],
articityList: [
{
author: "lin",
classifyList: [
{
classifyImageUrl: "",
code: "AAAAA",
createDatetime: "2020-01-09 19:13:29",
description: "",
groupId: "49",
id: "36",
isDelete: "0",
isInner: "0",
name: "好吃的苹果",
numberCount: "0",
parentId: "0",
updateDatetime: "2020-01-09 19:13:29",
},
],
coverUrl:
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/NQc3hbRBf4.png",
createDatetime: "2021-01-15 22:00:24",
effectiveReviewNum: "0",
fabulousNum: "0",
forwardNum: "0",
id: "140",
isDelete: "0",
releaseDatetime: "2021-01-15 22:00:44",
remark: "测试",
reviewNum: "0",
status: "1",
tagList: [
{
articleId: "115",
createDatetime: "2021-01-08 10:26:40",
createOperator: "98",
createSource: "1",
description: "",
groupId: "49",
id: "38",
isDelete: "0",
tagCode: "",
tagName: "123123",
updateDatetime: "2021-01-08 10:26:40",
},
{
articleId: "72",
createDatetime: "2021-01-07 10:38:28",
createOperator: "98",
createSource: "1",
description: "",
groupId: "49",
id: "25",
isDelete: "0",
tagCode: "",
tagName: "123",
updateDatetime: "2021-01-07 10:38:28",
},
],
title: "前端测试文章",
updateDatetime: "2021-01-15 22:00:24",
userBrowsingNum: "4",
},
],
},
},
{
id: 4,
componentName: "商品列表",
componentCode: "goods-list",
componentType: 1,
queueNumber: 4,
componentInfo: { visible: 1, condition: "", drawable: 0 },
componentData: {
goodsList: [],
categoryId: "",
categoryName: "",
initProductArr: [],
titles: "这是标题",
content:
"这里是内容 可以编写需要的内容 测试测试测试测试测试测试测试测试测试",
link: "https://www.baidu.com/",
fontColor: "#ed6a0c",
goodsSource: "assign",
goodsType: 0,
style: "list",
imgPadding: 20,
moreShow: true,
moreButtonSite: "top",
rowNum: 2,
columnNum: 2,
proGap: 5,
titleCardGap: 10,
heapBgColorShow: true,
heapBgColor: "",
backgroundColorShow: true,
backgroundColor: "#fff",
borderColorShow: false,
borderColor: "#e0e0e0",
nameShow: true,
nameFontSize: 1,
imgSize: "0%",
nameColor: "#333333",
describeShow: true,
describeFontSize: 1,
priceShow: true,
priceFontSize: 0.8,
priceColor: "#f23030",
angleShow: false,
colorLayoutShow: false,
colorLayoutSite: "top",
initcharAlign: "left",
borderRadius: 0.3,
cardBorderRadius: 0,
collectShow: true,
followerShow: false,
followerColor: "",
alSaleShow: true,
followerFontSize: 0.6,
paynow: false,
priceMarking: true,
goodsSort: 0,
whetherFindDistributionCommission: 0,
commissionColor: "",
commissionBgColor: "",
commissionStyle: 0,
angleSign: false,
angleSignType: 0,
angleSignImg:
"http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1f7d246e-966c-4f3e-b09f-264bfa579b02.png",
angleSignSize: 25,
marketingTag: false,
vipPrice: false,
marketingStyle: 0,
marketingTagList: [
{ key: "recommend", label: "推荐" },
{ key: "special", label: "特价" },
{ key: "freeShipping", label: "免邮" },
{ key: "newGoods", label: "新品" },
],
btnIcon: "",
btnType: 6,
btnColor: "",
btnTest: "立即购买",
titleIcon: "",
cardShadow: false,
cardShadowSize: 3,
goodsBrand: false,
merchantsEntrance: false,
merchantsEntranceType: 0,
paddingList: [
{ name: "上", value: 0 },
{ name: "下", value: 0 },
{ name: "左", value: 0 },
{ name: "右", value: 0 },
],
},
},
{
id: 3,
queueNumber: 5,
componentName: "优惠券",
componentCode: "coupon",
componentType: 1,
componentInfo: { visible: 1, condition: "", drawable: 0 },
componentData: {
couponList: [
{
applyGoodsType: "1",
canExchangeBonusFlag: "0",
consumeIntegral: "0.000000",
couponCode: "COUP2020122811491200000047",
couponName: "测试导出的 小工蚁商品3优惠券",
createDatetime: "2020-12-28 11:49:12",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "30",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "438",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "10.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "2",
remainingQty: "0",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-28 14:16:38",
usedQty: "2",
},
{
applyGoodsType: "1",
canExchangeBonusFlag: "0",
consumeIntegral: "0.000000",
couponCode: "COUP2020121405234200000046",
couponName: "限制总数",
createDatetime: "2020-12-14 17:23:42",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "399",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "437",
instruction: "",
issueQty: "40",
issueQtyType: "1",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "10.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "3",
remainingQty: "35",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-28 09:15:34",
usedQty: "0",
},
{
applyGoodsType: "1",
canExchangeBonusFlag: "0",
consumeIntegral: "0.000000",
couponCode: "COUP2020121405101100000045",
couponName: "压测优惠券",
createDatetime: "2020-12-14 17:10:11",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "500",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "436",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "5.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "2",
remainingQty: "0",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-28 09:15:33",
usedQty: "0",
},
{
applyGoodsType: "1",
canExchangeBonusFlag: "0",
consumeIntegral: "0.000000",
couponCode: "COUP2020101905394000000024",
couponName: "满99元立减20",
createDatetime: "2020-10-19 17:39:40",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "1",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "415",
instruction: "泰迪珍藏系列满99元立减20",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "1",
limitReceiveQtyType: "1",
meetMoneyUse: "99.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "20.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "5",
remainingQty: "0",
remark: "",
thresholdType: "1",
updateDatetime: "2020-11-26 10:32:50",
usedQty: "0",
},
{
applyGoodsType: "0",
canExchangeBonusFlag: "0",
canExchangeBonusValue: "1000000.000000",
consumeIntegral: "0.000000",
couponCode: "COUP2020091610592600000020",
couponName: "短信测试优惠券",
createDatetime: "2020-09-16 10:59:26",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "100",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "411",
instruction: "",
issueQty: "1000",
issueQtyType: "1",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "5.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "8",
remainingQty: "989",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-28 17:50:14",
usedQty: "7",
},
{
applyGoodsType: "0",
canExchangeBonusFlag: "0",
canExchangeBonusValue: "1000000.000000",
consumeIntegral: "0.000000",
couponCode: "COUP2020090711191100000016",
couponName: "短信测试优惠券",
createDatetime: "2020-09-07 11:19:11",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "100",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "407",
instruction: "",
issueQty: "1000",
issueQtyType: "1",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "10.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "11",
remainingQty: "967",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-26 16:52:23",
usedQty: "17",
},
{
applyGoodsType: "0",
canExchangeBonusFlag: "0",
canExchangeBonusValue: "1000000.000000",
consumeIntegral: "0.000000",
couponCode: "COUP2020090710281100000015",
couponName: "短信测试优惠券",
createDatetime: "2020-09-07 10:28:11",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "100",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "406",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "10.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "4",
remainingQty: "0",
remark: "",
thresholdType: "0",
updateDatetime: "2020-12-14 11:11:29",
usedQty: "4",
},
{
applyGoodsType: "1",
canExchangeBonusFlag: "0",
consumeIntegral: "0.000000",
couponCode: "COUP2020081206280000000001",
couponName: "测试精度",
createDatetime: "2020-08-12 18:28:00",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "0",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "392",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "3",
preferentialDiscount: "0.000000",
preferentialMoney: "8.800000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "2",
remainingQty: "0",
remark: "",
thresholdType: "0",
updateDatetime: "2020-08-31 19:20:20",
usedQty: "5",
},
{
applyGoodsType: "0",
canExchangeBonusFlag: "1",
canExchangeBonusValue: "1.000000",
consumeIntegral: "0.000000",
couponCode: "COUP2020080604031200000213",
couponName: "满199立减99",
createDatetime: "2020-08-06 16:03:12",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "0",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "391",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "1",
limitReceiveQtyType: "1",
meetMoneyUse: "199.000000",
periodOfValidityType: "3",
preferentialDiscount: "0.000000",
preferentialMoney: "99.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "5",
remainingQty: "10",
remark: "",
thresholdType: "1",
updateDatetime: "2020-12-26 16:48:36",
usedQty: "0",
},
{
applyGoodsType: "1",
canExchangeBonusFlag: "1",
canExchangeBonusValue: "10.000000",
consumeIntegral: "0.000000",
couponCode: "COUP2020060404295200000182",
couponName: "anttest001",
createDatetime: "2020-06-04 16:29:52",
createOperator: "98",
effectiveDate: null,
effectiveDaysFromToday: "1",
effectiveDaysFromTomorrow: "0",
enableFlag: "1",
expiryDate: null,
groupId: "49",
id: "360",
instruction: "",
issueQty: "0",
issueQtyType: "0",
limitReceiveQty: "0",
limitReceiveQtyType: "0",
meetMoneyUse: "0.000000",
periodOfValidityType: "1",
preferentialDiscount: "0.000000",
preferentialMoney: "1.000000",
preferentialType: "0",
publicFlag: "1",
receiveCostType: "0",
receivedPeopleQty: "2",
remainingQty: "0",
remark: "",
thresholdType: "0",
updateDatetime: "2020-10-03 11:49:39",
usedQty: "1",
},
],
title: "优惠券",
style: 3,
couponStyleList: [
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/d0963c93-8a3a-4acb-b22d-bf5a7dda008e.png",
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/c699defc-3ffd-44f0-890e-7181145a9bb2.png",
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/2f967ddf-55f3-45f1-9909-b946da948335.png",
],
selectionIds: [
"438",
"437",
"436",
"415",
"411",
"407",
"406",
"392",
"391",
"360",
],
},
},
],
};
},
mounted() {},
};
</script> </script>
<style> <style>
......
src/pages/home/main.json
{ {
"usingComponents": {
} "banner": "../../../static/nativeComponents/banner/index"
\ No newline at end of file }
}
\ No newline at end of file
static/nativeComponents/banner/index.js 0 → 100644
const app = getApp()
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String
// value: '',
},
list: {
type: Array
},
datas: {
type: Object
}
},
data: {
// 这里是一些组件内部数据
message: "Hello World",
indicatorDots: false,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
activeIndex:0,
},
methods: {
customMethod() {
console.log("hello world! I am learning 微信小程序");
},
bannerChange(val) {
console.log(val,'--------30')
this.setData({ activeIndex:val.detail.current });
},
}
});
\ No newline at end of file
static/nativeComponents/banner/index.json 0 → 100644
{
"component": true
}
\ No newline at end of file
static/nativeComponents/banner/index.wxml 0 → 100644
<view>
<view class="banner"
style="--dotsColor:{{datas.componentData.indColor}};padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
<view class="bannerItem">
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="bannerChange">
<block wx:for="{{datas.componentData.imgList}}" wx:key="index">
<swiper-item>
<view class="swiper-item">
<image src="{{item.imageUrl}}" style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx" mode="widthFix" class="bannerImgItem"></image>
</view>
</swiper-item>
</block>
</swiper>
<view class="dots">
<view class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}}" wx:for="{{datas.componentData.imgList}}" wx:key="index"></view>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/banner/index.wxss 0 → 100644
.banner{
/* position: relative; */
}
.bannerItem{
position: relative;
}
.swiper{
width: 100%;
height: calc(100vw*9/16);
padding-bottom: 32rpx;
}
.swiper-item{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.bannerImgItem{
width: 100%;
height: 100%;
}
.dots{
position: absolute;
bottom: 10rpx;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
.dotsItem{
margin: 0 8rpx;
background: rgba(255,255,255,0.4);
}
.dotsStyle1{
width: 30rpx;
height: 10rpx;
border-radius: 4rpx;
-webkit-border-radius: 4rpx;
-moz-border-radius: 4rpx;
-ms-border-radius: 4rpx;
-o-border-radius: 4rpx;
}
.dotsStyle2{
width: 20rpx;
height: 20rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.isDotsColor{
background: var(--dotsColor);
border-color: var(--dotsColor);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment