小程序同步滑块

本文详细介绍了在微信小程序中实现富文本编辑器的步骤,包括从Git下载文件、解析富文本的两种方法以及使用WxParse库。同时讲解了转发分享配置、下拉分页加载数据、内容隐藏显示的逻辑以及滑块效果的实现,涉及滚动导航和Swiper组件的交互。
摘要由CSDN通过智能技术生成
1.富文本编辑器
(1)复制git下载来的文件夹
(2)commom文件夹和editor里的文件
2.富文本解析,两种方式
第一种程序自带标签:<`!-- <rich-text nodes="{{html}}"></rich-text> -->`
第二种组件,调用模板:下载对应的源码

git clone https://github.com/icindy/wxParse.git
引入必要文件

// 导入到js逻辑文件中

var WxParse = require('../../wxParse/wxParse.js');

// 导入必须的样式文件

@import "/wxParse/wxParse.wxss";

数据绑定

var articleHtml = '<div>我是HTML代码</div>';
//写在页面加载事件里
WxParse.wxParse('article', 'html', articleHtml, this, 5);
引入模板

<import src="/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

2.转发分享

<button open-type="share">分享</button>
onShareAppMessage: function () {
      return{
        title:"这是一个分享",
        psth:"/pages/type/type.wxml",
        imageUrl:"https://img0.baidu.com/it/u=3401732207,3726302783&fm=26&fmt=auto&gp=0.jpg",
      }
  }

3.下拉分页

onReachBottom: function () {
    var arr=[
      {
        img:"https://img2.baidu.com/it/u=3771030443,424141137&fm=26&fmt=auto&gp=0.jpg",
        nick_name:"骑鱼的猫",
        time:"3小时前",
        count:"很简单,豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子,会涉及到各方背后利益关系的片子...",
        like_count:"10w+",
        comment_count:"59w+"
      }
    ];
    for(let i=0;i<arr.length;i++){
        this.data.content.push(arr[i])
    }
    this.setData({
      content:this.data.content
    })
  },

4.隐藏显示

 <view class="class-parent">
  <view class="class-child" class="{{content[0]}}" data-k="{{0}}" bindtap="chagehidden">价格详情</view>
  <view class="class-child" class="{{content[1]}}"
  data-k="{{1}}" bindtap="chagehidden">产地详情</view>
  <view class="class-child" class="{{content[2]}}"
  data-k="{{2}}" bindtap="chagehidden">商品详情</view>
  </view>
  <view>
    <view hidden="{{hide[0]}}">价格对应的详情</view>
    <view hidden="{{hide[1]}}">产地对应的详情</view>
    <view hidden="{{hide[2]}}">商品对应的详情</view>
  </view>
chagehidden:function(e){
  // 获取用户点击的下标
  var k=e.target.dataset.k;
  //判断点击下标和定义下标
  var arr=this.data.content;
  for(let i=0;i<arr.length;i++){
    if(i==k){
      arr[i]='now';
      this.data.hide[i]=false;
    }else{
        arr[i]='';
        this.data.hide[i]=true;
    }
  }
  //替换原来的值
  this.setData({
    content:arr,
    hide:this.data.hide
  })
},
data数据
   content:['now','',''],
    hide:[false,true,true],

5.滑块效果

js
changeClass:function(e){
  var navInde=e.target.dataset.k
  var id=e.target.id
  this.setData({
    navIndex:navInde,
    navId:id
  })
},
changeSwiper:function(e){
  var id=e.detail.current
  this.setData({
    navIndex:id
  })
},
<scroll-view 
class="scroll-view" 
scroll-x='true'
scroll-into-view="{{navId}}"
scroll-with-animation="true"
>
  <view 
  class="demo-text {{index==navIndex? 'selected' : ''}}" 
  wx:for="{{navs}}"
  wx:key="index"
  >
<!-- 手动触摸事件 -->
  <view class="item-text" 
  bindtap="changeClass" 
  data-k="{{index}}"
  id="nav{{index}}"
  >
{{item}}
</view>
  </view>
</scroll-view>
<!-- 同步 -->
<swiper 
current="{{navIndex}}"
duration="200"
class="swiper-list"
bindchange="changeSwiper"
>
<swiper-item>
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
   <swiper-item><image src="/images/swiper_1.jfif" style="width:100%"></image></swiper-item>
   <swiper-item><image src="/images/swiper_2.jfif" style="width:100%"></image></swiper-item>
   <swiper-item><image src="/images/swiper_3.jfif" style="width:100%"></image></swiper-item>
  </swiper>
  <view class="classlist">
      <view class="list-child" wx:for="{{recom}}"> 
        <image class="list-image" src="{{item[1]}}"></image>
        <view class="list-text">{{item[0]}}</view>
      </view>
  </view>
  </swiper-item>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值