在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Mao-Scroll开源软件地址:https://gitee.com/XzcGroup/mao-scroll开源软件介绍:Mao-Scroll 文本上下滚动滑动介绍uniapp 文字滚动组件 安装教程uniapp安装点击左侧按钮进行导入到项目 gitee安装克隆本仓库 git clone https://gitee.com/XzcGroup/mao-scroll.git 使用示例详见:https://gitee.com/XzcGroup/mao-scroll/blob/master/pages/index/index.vue <template> <view> <view class="main"> <view class="subject">抽奖结果</view> <view class="body"> <maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll" :animation="animation"> <template v-slot="{line}"> <view class="line">{{line.author}} 获得 {{line.subject}}</view> </template> </maoScroll> </view> </view> <view class="main"> <view class="subject">滑动配置</view> <view class="body"> <view><text>数据总数:</text><text>{{count}}条(模拟)</text></view> <view><text>显示条数:</text><text>{{showNum}}条</text></view> <view><text>每行高度:</text><text>{{lineHeight}}rpx</text></view> <view><text>滑动时间:</text><text>{{animationScroll}}毫秒</text></view> <view><text>滑动间隔:</text><text>{{animation}}毫秒</text></view> </view> </view> </view></template><script> import maoScroll from '@/components/mao-scroll/mao-scroll.vue'; export default { components:{ maoScroll }, data() { return { title: 'Hello', data: [], count: 30, showNum: 5, lineHeight: 60, animationScroll: 800, animation: 2000, } }, onLoad() { this.createData(); }, methods: { createData: function(){ for(let i = 1; i <= this.count; i++){ this.data.push({ author: 'MaoUI', subject: 'OnePlus手机 * ' + i + '部' }) } } } }</script><style> .main{margin:30rpx;background-color: #FF6700;border-radius: 10rpx;border:1px solid #FF6700;} .main .subject{height: 80rpx;font-size: 36rpx;text-align: center;line-height: 80rpx;color: #fff;} .main .body{padding: 20rpx;background-color: #FFFFFF;} .main .body .line{height: 60rpx;line-height: 60rpx;}</style> |
请发表评论