如何在追格资讯小程序(Uniapp专业版)中将滚动图标调整为自动换行模式

追格官方小助手/ 2023年01月03日/ 小程序/ 浏览 2946

追格资讯小程序(Uniapp专业版)中,首页中的图标默认是滚动模式,有些用户希望调整为自动换行模式。那么我们该如何调整呢?

在追格资讯小程序的首页模板中,其实我们已经为大家预制了图标的两种展示方式,通过简单的调整,无需调整css,就可以从滚动模式切换为自动换行模式。

接下来给大家说说如何调整


打开追格资讯小程序(Uniapp专业版)的首页模板index.vue 找到以下代码:


		<!-- icon -->
		<!-- 图标导航 滚动模式-->
		<view v-if="iconNav && iconNav.length>0" class="jiangqie-scroll-icon">
			<scroll-view scroll-x="true">
				<view class="jiangqie-iconbox" :data-link="item.link" @click="iconNavItemClick"
				v-for="(item,index) in (iconNav)" :key="index">
					<image mode="aspectFill" class="jiangqie-iconimg" :src="item.icon"></image>
					<text>{{item.title}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 图标导航 自动换行模式 -->
		<!-- <view v-if="iconNav && iconNav.length>0" class="jiangqie-icon" style="display: none;">
			<view class="jiangqie-iconbox" :data-link="item.link" @click="iconNavItemClick"
				v-for="(item,index) in (iconNav)" :key="index">
				<image class="jiangqie-iconimg" :src="item.icon"></image>
				<text>{{item.title}}</text>
			</view>
		</view> -->


1、将图标导航滚动模式注释或者增加style="display: none;"


2、同时将图标导航自动换行模式去掉style="display: none;",同时取消注释便可以实现以下效果了:



发表评论

暂无评论,抢个沙发...

客服 工单