更新记录
1.0.0(2021-02-19) 下载此版本
第一次提交
平台兼容性
前言
简介: 1.翻转效果组件: 有4个类型:1:3d 2:翻页 3:自动翻页 4: 2d平面 2.自定义主题色,和显示内容等,开箱即用
有疑问
微信搜索“慢慢向好”小程序,找客服反馈,相应问题。
素材
示例项目可直接运行
开始使用
下载源码解压,复制/components
下的组件至项目根目录的 /components
文件夹下
index.vue
的script
加入如下部分(自行选择需要展示的部分):
import ayturn from '@/components/ay-turn/ay-turn.vue';
export default {
components: {
ayturn,
},
data() {
return {
list: [{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},
{
img: 'https://cdn.pixabay.com/photo/2021/02/01/18/50/drop-5971598__340.jpg',
},],
list_page:[{
size: '',
img: 'https://cdn.pixabay.com/photo/2021/01/25/11/54/woman-5948133__340.jpg',
txt: '名人名言',
},
{
size: 1,
txt: '开口就讲困难,成长已经远离你;一付出就想回报,机会已经远离你;一做事就在想个人利益,收获已经远',
},
{
size: 2,
txt: '离你;一有起色就在想谈条件,未来已经远离你;一合作就想自己如何不吃亏,事业已经远离你……格局有',
},
{
size: 3,
txt: '多大成就有多大!选择了安逸舒适,就不必羡慕别人的精彩;选择了惊涛骇浪,就无须向往岁月静好。不同',
},
{
size: 4,
txt: '的选择给予你不同的生活路径。只要认定你内心真正想要的,并为之持续努力,每个人都会是自己的人生赢家!',
},
{
size: 5,
txt: '但凡成功之人,往往都要经历一段没人支持、没人帮助的黑暗岁月,而这段时光,恰恰是沉淀自我的关键阶',
},
{
size: 6,
txt: '段。犹如黎明前的黑暗,捱过去,天也就亮了。所谓千里马,不一定是跑得最快的,但一定是耐力最好的。',
},
{
size: 7,
txt: '可以抱怨,但必须忍耐,积蓄力量,等待机会——这样,人生才会有希望。生命是一场从蒙昧到清醒的追寻。',
},
{
size: 8,
txt: '若能时时刻刻保持察觉,我们将可以在痛苦中找到恩典,可以少一些怀疑,多一些相信。生活越是艰苦,人就越',
},
{
size: 9,
txt: '发坚强;人越是坚强,生活也就变得越发简单。',
},],
list_page_auto:[{
size: 5,
txt: '修身治国平天下555',
},
{
size: 4,
txt: '修身治国平天下44444444',
},
{
size: 3,
txt: '修身治国平天下3333',
},
{
size: 2,
txt: '修身治国平天下222222222',
},
{
size: 1,
txt: '修身治国平天下11111',
},],
cover_auto:{},
pros_img:'https://cdn.pixabay.com/photo/2020/03/13/08/34/south-station-4927286__340.jpg',
cons_img:'https://cdn.pixabay.com/photo/2021/01/11/18/41/snowfall-5909261__340.jpg',
}
},
onLoad() {
let that = this;
that.loadData();
},
onShow() {
},
// #ifdef MP-WEIXIN
//微信小程序的分享
onShareAppMessage: function(options) {
},
// #endif
methods: {
async loadData() {
let that = this;
},
}
}
index.vue
的template
加入如下部分:
<view>
<view style="margin-top: 130upx;">
<!-- 3d的会影响闪动一下,但不影响单独使用 -->
<ayturn :type="3" :height="400" :width="300" :cover="cover_auto" :list="list_page_auto"></ayturn>
</view>
<ayturn :type="1" :height="100" :width="200" :list="list"></ayturn>
<ayturn :type="4" :height="150" :width="150" :pros_img="pros_img" :cons_img="cons_img"></ayturn>
<ayturn :type="2" :height="640" :width="400" :list="list_page"></ayturn>
<ayturn :type="1" :height="100" :width="200" :list="list"></ayturn>
<ayturn :type="1":height="100" :width="200" :marginTop="10" :list="list"></ayturn>
<ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
<ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
<ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
<ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
<ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list"></ayturn>
</view>
参考
供学习整理,易于下次便捷使用与快捷重复使用,如有任何冒犯的地方,可微信搜索“慢慢向好”小程序,找客服说明删除