如何设计一个吸引用户的1688成品网站入口小程序？

成品网站1688入口,小程序设计软件,如何建立小程序商城,网站logo 更换uniapp通过uni-swiper-dot实现轮播图前言效果图1、官网实现的效果2、需求中使用到的效果图官网提供的效果图源码1、html部分2、js部分3、css部分根据需求调整轮播图前言 uni-swiper-dot.文档 uni-swiper-dot 轮播图指示点 - DCloud 插件市场 本次展示根据需求制作的和官网用到… uniapp通过uni-swiper-dot实现轮播图前言效果图1、官网实现的效果2、需求中使用到的效果图官网提供的效果图源码1、html部分2、js部分3、css部分根据需求调整轮播图前言 uni-swiper-dot.文档 uni-swiper-dot 轮播图指示点 - DCloud 插件市场 本次展示根据需求制作的和官网用到的轮播图和源码 效果图 1、官网实现的效果 2、需求中使用到的效果图 官网提供的效果图源码 使用官网的代码需要下载uni-section uni-swiper-dot提供的api 可以通过改变uni-swiper-dot的参数来实现轮播图的样式和颜色以及距离等 1、html部分 templateview classcontentuni-swiper-dot classuni-swiper-dot-box clickItemclickItem :infoinfo :currentcurrent :modemode:dots-stylesdotsStyles fieldcontentswiper classswiper-box changechange :currentswiperDotIndexswiper-item v-for(item, index) in 3 :keyindexview classswiper-item :classswiper-item indextext stylecolor: #fff; font-size: 32px;{{index1}}/text/view/swiper-item/swiper/uni-swiper-dotuni-section title模式选择 typelineview classexample-bodyview :class{ active: modeIndex 0 } classexample-body-item clickselectMode(default, 0)text classexample-body-item-textdefault/text/viewview :class{ active: modeIndex 1 } classexample-body-item clickselectMode(dot, 1)textclassexample-body-item-textdot/text/viewview :class{ active: modeIndex 2 } classexample-body-item clickselectMode(round, 2)text classexample-body-item-textround/text/viewview :class{ active: modeIndex 3 } classexample-body-item clickselectMode(nav, 3)textclassexample-body-item-textnav/text/viewview :class{ active: modeIndex 4 } classexample-body-item clickselectMode(indexes, 4)text classexample-body-item-textindexes/text/view/view/uni-sectionuni-section title颜色样式选择 typelineview classexample-bodytemplate v-ifmode ! navview v-for(item, index) in dotStyle :class{ active: styleIndex index } :keyindexclassexample-body-item clickselectStyle(index)view :style{ background-color: item.selectedBackgroundColor, border: item.selectedBorder }classexample-body-dots /view :style{ background-color: item.backgroundColor, border: item.border }classexample-body-dots /view :style{ background-color: item.backgroundColor, border: item.border }classexample-body-dots //view/templatetemplate v-ifmode navview v-for(item, index) in dotStyle :class{ active: styleIndex index } :keyindex:style{ background-color: item.selectedBackgroundColor } classexample-body-itemclickselectStyle(index)text classexample-body-item-text :style{ color: item.color }内容/text/view/template/view/uni-section/view /template2、js部分 scriptexport default {components: {},data() {return {info: [{colorClass: uni-bg-red,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 A},{colorClass: uni-bg-green,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 B},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C}],dotStyle: [{backgroundColor: rgba(0, 0, 0, .3),border: 1px rgba(0, 0, 0, .3) solid,color: #fff,selectedBackgroundColor: rgba(0, 0, 0, .9),selectedBorder: 1px rgba(0, 0, 0, .9) solid},{backgroundColor: rgba(255, 90, 95,0.3),border: 1px rgba(255, 90, 95,0.3) solid,color: #fff,selectedBackgroundColor: rgba(255, 90, 95,0.9),selectedBorder: 1px rgba(255, 90, 95,0.9) solid},{backgroundColor: rgba(83, 200, 249,0.3),border: 1px rgba(83, 200, 249,0.3) solid,color: #fff,selectedBackgroundColor: rgba(83, 200, 249,0.9),selectedBorder: 1px rgba(83, 200, 249,0.9) solid}],modeIndex: -1,styleIndex: -1,current: 0,mode: default,dotsStyles: {},swiperDotIndex: 0}},onLoad() {},methods: {change(e) {this.current e.detail.current},selectStyle(index) {this.dotsStyles this.dotStyle[index]this.styleIndex index},selectMode(mode, index) {this.mode modethis.modeIndex indexthis.styleIndex -1this.dotsStyles this.dotStyle[0]},clickItem(e) {this.swiperDotIndex e},onBanner(index) {console.log(22222, index);}}} /script3、css部分 style langscss.swiper-box {height: 200px;}.swiper-item {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: column;justify-content: center;align-items: center;height: 200px;color: #fff;}.swiper-item0 {background-color: #cee1fd;}.swiper-item1 {background-color: #b2cef7;}.swiper-item2 {background-color: #cee1fd;}.image {width: 750rpx;}/* #ifndef APP-NVUE */::v-deep .image img {-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none;}/* #endif */media screen and (min-width: 500px) {.uni-swiper-dot-box {width: 400px;margin: 0 auto;margin-top: 8px;}.image {width: 100%;}}.uni-bg-red {background-color: #ff5a5f;}.uni-bg-green {background-color: #09bb07;}.uni-bg-blue {background-color: #007aff;}.example-body {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;padding: 20rpx;}.example-body-item {flex-direction: row;justify-content: center;align-items: center;margin: 15rpx;padding: 15rpx;height: 60rpx;/* #ifndef APP-NVUE */display: flex;padding: 0 15rpx;/* #endif */flex: 1;border-color: #e5e5e5;border-style: solid;border-width: 1px;border-radius: 5px;}.example-body-item-text {font-size: 28rpx;color: #333;}.example-body-dots {width: 16rpx;height: 16rpx;border-radius: 50px;background-color: #333333;margin-left: 10rpx;}.active {border-style: solid;border-color: #007aff;border-width: 1px;} /style 根据需求调整轮播图 其中使用到了轮播头图 其中使用到了swiper的circular autoplay两个参数 circular是否采用衔接滑动即播放到末尾后重新回到开头 autoplay是否自动切换 官网提供的swiper的api 官网提供的swiper的api templateview classhomeview classhome_swiperuni-swiper-dot classuni-swiper-dot-box clickItemclickItem :infoinfo :currentcurrent :modemode:dots-stylesdotsStyles fieldcontentswiper classswiper-box changechange :currentswiperDotIndex circular autoplayeasing-functioneaseInOutCubicswiper-item v-for(item, index) in info :keyindexview classswiper-item :classswiper-item index clickSwItemClick(item.nextUrl)!-- text stylecolor: #fff; font-size: 32px;{{item.content}}/text --!-- img :srcitem.url alt stylewidth:100%;height:100% --div classswitemImage :style{backgroundImage: url(item.url)} //view/swiper-item/swiper/uni-swiper-dot/view/view /templatescriptconst homeSwiper uniCloud.importObject(homeSwiper)export default {components: {},data() {return {info: [{colorClass: uni-bg-red,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 A,nextUrl: /pages/place/place},{colorClass: uni-bg-green,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 B},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C},{colorClass: uni-bg-blue,url: https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,content: 内容 C}],current: 0,mode: default,dotsStyles: {backgroundColor: rgba(0, 0, 0, .3),border: 1px rgba(0, 0, 0, .3) solid,color: #fff,selectedBackgroundColor: rgba(0, 0, 0, .9),selectedBorder: 1px rgba(0, 0, 0, .9) solid},swiperDotIndex: 0}},onLoad() {this.getData()},methods: {change(e) {this.current e.detail.current},clickItem(e) {this.swiperDotIndex e},SwItemClick(e) {console.log(e)uni.switchTab({url: e})},getData() {homeSwiper.get(111).then(res{console.log(res.data)})}},} /scriptstyle langscss scoped.home {position: absolute;height: 100%;width: 100%;background-color: rgb(241, 236, 229);.swiper-box {height: 20rem;}.swiper-item {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: column;justify-content: center;align-items: center;height: 20rem;color: #fff;}.swiper-item0 {background-color: #cee1fd;}.swiper-item1 {background-color: #b2cef7;}.swiper-item2 {background-color: #cee1fd;}.image {width: 750rpx;}::v-deep .uni-swiper__dots-box {justify-content: left;left: 2rem;.uni-swiper__dots-item {margin-left: 0px}}.switemImage {width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center center}} /style