怎么设置小程序的banner?

小程序 文章 2021-04-08 10:42 0 11 全屏看文

怎么设置小程序的banner?How to set the banner of the applet?

怎么设置小程序的banner?

正在开发一个商城类的小程序,现在有一个比较棘手的就是需要可以在后台设置banner,然后做跳转,跳转到对应的页面去,这个现在怎么实现?如果使用链接跳转怎么获取跳转链接?

Is developing a mall class small program, now there is a more difficult need is to set the banner in the background, and then do jump, jump to the corresponding page, how to achieve this now? If you use link jump, how to get jump link?

回答:

青团社:

你后台配置 前端获取的时候加个跳转链接不就好了么。不行还有高级版的万能跳转。

<swiper wx:for="{{bannerList}}" wx:key="index">  <view bindtap="handleClick" data-url="{{item.url}}">     <image src="{{item.banner}}" mode="widthFix" />  </view></swiper>data: {  bannerList: [{    banner: 'https://xxxx/xxx.png', // banner图片    url: '/pages/xxx/xxx' // 跳转链接  },{    banner: 'https://xxxx/xxx.png', // banner图片    url: '/pages/xxx/xxx' // 跳转链接  }]},handleClick(e) {  const { dataset: {url}} = e.currentTarget  wx.navigateTo({    url  })}
ᥴꪮꪮꪶ .:

1.使用swiper开发轮播图

2.每个swiper-item添加点击事件

3.轮播图数据返回格式

[{  type:"inside",  pagePath: "页面路径",  imagePath: "图片路径" },{  type:"web",  pagePath: "链接地址",  imagePath: "图片路径" }      ]

4.点击根据type值设置跳转方式就行

5.做成后台可配置的轮播图参数就更完美了

麦田守望者:链接地址怎么获取?我是说在这个产品运营过程中,比如我创建了一个活动,指向一个商品,我怎么知道商品的链接?
😮😮:

接口获取数据展示然后点击跳转啊 banner可以用这个https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

-EOF-