• css图片滚动

    1. <template>
    2. 	<view class="dade">
    3. 		<view>
    4. 			<image class="dade_img" src="https://xcx.youmeichenpin.com//static/cj/800.jpg">image>
    5. 		view>
    6. 		<view>
    7. 			<view class="dade_ti">
    8. 				<image class="dade_imgs" src="https://xcx.youmeichenpin.com//static/cj/kuang.png">image>
    9. 			view>
    10. 			<view class="dade_ti1">
    11. 				<view class="dade_imgs">
    12. 					<view style="display: flex;" v-for="it in index">
    13. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/1.png">image>view>
    14. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/2.png">image>view>
    15. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/3.png">image>view>
    16. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/4.png">image>view>
    17. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/5.png">image>view>
    18. 						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/6.png">image>view>
    19. 					view>
    20. 				view>
    21. 			view>
    22. 		view>
    23. 	view>
    24. template>
    25. <script>
    26. 	export default {
    27. 		data() {
    28. 			return {
    29. 				index:[1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,32,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2],
    30. 				dade:[]
    31. 			}
    32. 		},
    33. 		onLoad() {
    34. 			
    35.  
    36. 		},
    37. 		onReady() {
    38. 			
    39. 		},
    40. 		onShow: function() {
    41. 			
    42. 		},
    43.  
    44. 		methods: {
    45. 			// 签到
    46. 			goSignIn() {
    47. 				uni.navigateTo({
    48. 					url: '/pages/users/user_sgin/index'
    49. 				})
    50. 			},
    51. 			
    52. 		}
    53. 	}
    54. script>
    55.  
    56. <style lang="scss">
    57. 	.dade{
    58. 		width: 100%;
    59. 		height: 100%;
    60. 		.dade_img{
    61. 			width: 750rpx;
    62. 			height: calc(100vh);
    63. 			z-index: 2;
    64. 		}
    65. 		.dade_ti{
    66. 			position: absolute;
    67. 			top: 30%;
    68. 			width: 700rpx;
    69. 			left: 25rpx;
    70. 			z-index: 10;
    71. 			.dade_imgs{
    72. 				width: 100%;
    73. 				height: 350rpx;
    74. 			}
    75. 		}
    76. 		.dade_ti1{
    77. 			position: absolute;
    78. 			top: 34.8%;
    79. 			width: 550rpx;
    80. 			left: 100rpx;
    81. 			z-index: 10;
    82. 			.dade_imgs{
    83. 				display: flex;
    84. 				overflow: auto;
    85. 				width: 550rpx;
    86. 				.dade_imgs1{
    87. 					animation: rolling 20s linear infinite;
    88. 					@keyframes rolling {
    89. 						from {
    90. 							transform: translateX(0);
    91. 						}
    92. 							
    93. 						to {
    94. 							transform: translateX(-1000%);
    95. 						}
    96. 					}
    97. 					width: 170rpx;
    98. 					height: 230rpx;
    99. 					margin-left: 10rpx;
    100. 				}
    101. 			}
    102.  
    103. 		}
    104. 	}
    105. 	
    106. 		
    107. style>

  • 相关阅读:
    永磁同步电机（PMSM）磁场定向控制（FOC）及Matlab/Simulink仿真分析
    职场成长的三种方式
    团建游戏大全
    Drozer安装
    别名获取方式记录
    千亿级大数据如何存储的？
    在Go项目中使用ELK进行日志采集
    阿冰的思考
    js 判断是 Android 设备还是苹果设备？
    Express的基本使用app.post()app.get()res.send()
  • 原文地址：https://blog.csdn.net/qq_34631220/article/details/126087125