百度网站降权,网站开发成都,杭州 电子商务网站建设 网络服务,江苏省建设局官方网站查询采用 uniapp 实现的一款圆形滚盘示例组件模板, 支持 vue2、vue3#xff0c;适配H5、微信小程序#xff08;其他小程序未试过#xff0c;可自行尝试#xff09;
代码实现简约易懂#xff0c;用户可根据自身需求下载模板#xff0c;并进行扩展开发可到插件市场下载尝试适配H5、微信小程序其他小程序未试过可自行尝试
代码实现简约易懂用户可根据自身需求下载模板并进行扩展开发可到插件市场下载尝试https://ext.dcloud.net.cn/plugin?id24676
示例props 属性
options选项数组必须具备 image 字段options: {type: Array,default: () [{ image: https://randomuser.me/api/portraits/lego/3.jpg },{ image: https://randomuser.me/api/portraits/lego/1.jpg },{ image: https://randomuser.me/api/portraits/lego/2.jpg },{ image: https://randomuser.me/api/portraits/lego/4.jpg },{ image: https://randomuser.me/api/portraits/lego/5.jpg },{ image: https://randomuser.me/api/portraits/lego/6.jpg },{ image: https://randomuser.me/api/portraits/lego/7.jpg },],
},circleRadius圆盘半径单位rpxcircleRadius: {type: Number,default: 150,
},circleCenter圆盘圆心坐标单位rpxcircleCenter: {type: Number,default: 200,
},imageSize滚盘元素图片大小单位rpximageSize: {type: Number,default: 60,
},speed旋转速度单位msspeed: {type: Number,default: 1,
},使用示例
vue2 使用示例
templateviewview stylepadding: 10pxview classtemplate-title模板一/viewview stylewidth: 400px; height: 300pxDemoTemplate :optionsimageList/DemoTemplate/view/viewview stylepadding: 10pxview classtemplate-title模板二/viewview stylewidth: 400px; height: 300pxDemoTemplate:circle-radius100:circle-center200:image-size50/DemoTemplate/view/view/view
/templatescript
import DemoTemplate from ./components/index.vue;export default {components: {DemoTemplate,},data() {return {imageList: [{image: https://randomuser.me/api/portraits/lego/3.jpg,},{image: https://randomuser.me/api/portraits/lego/1.jpg,},{image: https://randomuser.me/api/portraits/lego/2.jpg,},{image: https://randomuser.me/api/portraits/lego/4.jpg,},{image: https://randomuser.me/api/portraits/lego/5.jpg,},{image: https://randomuser.me/api/portraits/lego/6.jpg,},{image: https://randomuser.me/api/portraits/lego/7.jpg,},{image: https://randomuser.me/api/portraits/lego/8.jpg,},{image: https://randomuser.me/api/portraits/lego/9.jpg,},{image: https://randomuser.me/api/portraits/lego/4.jpg,},{image: https://randomuser.me/api/portraits/lego/4.jpg,},],};},
};
/scriptstyle scoped
.template-title {font-weight: bold;font-size: 14px;
}
/stylevue3 使用示例
templateviewview stylepadding: 10pxview classtemplate-title模板一/viewview stylewidth: 400px; height: 300pxDemoTemplate :optionsimageList/DemoTemplate/view/viewview stylepadding: 10pxview classtemplate-title模板二/viewview stylewidth: 400px; height: 300pxDemoTemplate:circle-radius100:circle-center200:image-size50/DemoTemplate/view/view/view
/templatescript setup
import { ref } from vue;
import DemoTemplate from ./components/index.vue;const imageList ref([{ image: https://randomuser.me/api/portraits/lego/3.jpg },{ image: https://randomuser.me/api/portraits/lego/1.jpg },{ image: https://randomuser.me/api/portraits/lego/2.jpg },{ image: https://randomuser.me/api/portraits/lego/4.jpg },{ image: https://randomuser.me/api/portraits/lego/5.jpg },{ image: https://randomuser.me/api/portraits/lego/6.jpg },{ image: https://randomuser.me/api/portraits/lego/7.jpg },{ image: https://randomuser.me/api/portraits/lego/8.jpg },{ image: https://randomuser.me/api/portraits/lego/9.jpg },{ image: https://randomuser.me/api/portraits/lego/4.jpg },{ image: https://randomuser.me/api/portraits/lego/4.jpg },
]);
/scriptstyle scoped
.template-title {font-weight: bold;font-size: 14px;
}
/style
